چک باکس Checkbox

چک باکس یا Checkbox چیست؟

چک باکس (Checkbox) یا جعبه بررسی یکی از انواع ویجت های رابط کاربری گرافیکی است که به کاربر اجازه می‌دهد از میان دو حالت انتخاب یک گزینه یا عدم انتخاب آن تصمیم گیری کند.

به عبارت بهتر هر چک باکس معمولی می‌تواند مستقل از سایر چک باکس ها یکی از دو وضعیت انتخاب شده (Checked) یا انتخاب نشده (Not Checked) را داشته باشد و نمایانگر گزینه ای باینری یا دوتایی باشد.

از چک باکس ها معمولا در دو مورد کلی زیر برای انتخاب گزینه ها استفاده می‌شود:

  • زمانی که برای گزینه موردنظر تنها دو حالت وجود داشته باشد: برای مثال گزینه “بسته بندی هدیه” در صفحه محصولات یک فروشگاه اینترنتی می‌تواند در قالب یک Checkbox طراحی شود. به این ترتیب کاربر با تیک زدن یا تیک نزدن این جعبه اعلام می‌کند آیا مایل است محصول خریداری شده در قالب هدیه بسته بندی شود یا خیر.
  • برای تعدادی گزینه که قرار است کاربر بتواند هیچ کدام، تمام گزینه ها و یا تعدادی از آن‌ها را انتخاب کند: به عنوان مثال در یک فروشگاه اینترنتی برای فیلتر کردن نتایج مموری های رایانه ای براساس میزان ظرفیت، می‌توان از Checkbox ها کمک گرفت. به این ترتیب کاربر می‌تواند با انتخاب گزینه های 8 GB و 16 GB تنها فهرست مموری های با این دو ظرفیت را مشاهده کند.
چک باکس یا جعبه بررسی Checkbox
نمونه‌ای از تعدادی Checkbox برای انتخاب ظرفیت مموری رایانه ای به منظور فیلتر کردن نتایج در یک فروشگاه اینترنتی

ظاهر و نحوه تعامل با چک باکس ها

این ویجت ها در حالت انتخاب نشده معمولا به صورت یک مربع تو خالی نمایش داده می‌شوند و در حالت انتخاب شده با علامت تیک یا ضربدر مشخص می‌شوند. معمولا به هرکدام از این جعبه ها یک برچسب (لیبل) نیز اختصاص داده می‌شود که گزینه متناظر با آن را توصیف می‌کند.

کاربر برای سوئیچ کردن وضعیت یک جعبه بررسی (تغییر حالت Checkbox از انتخاب نشده به انتخاب شده یا برعکس) می‌تواند از سه روش رایج زیر استفاده کند:

  • روی جعبه مربوطه یا لیبل آن کلیک کند و یا در صفحه نمایش های لمسی آن را لمس نماید. (توجه داشته باشید وجود لیبل به خصوص در دستگاه های با صفحه نمایش کوچک مانند گوشی های هوشمند، تعامل با چک باکس را آسانتر می‌کند)
  • در حالتی که جعبه دارای فوکس می‌باشد کلید Space bar را فشار دهد.
  • از کلید میانبر منتسب به جعبه (در صورت وجود) استفاده کند.

گفتنی است لایت سوئیچ ها (Light Switch) نوعی ویجت مشابه با Checkbox ها هستند که امکان انتخاب یکی از دو حالت را فراهم می‌کند. در این نوع ویجت ها، کاربر می‌تواند با هدایت یک سوئیچ از سمتی به سمت دیگر وضعیت آن را به انتخاب شده (یا روشن) و انتخاب نشده (یا خاموش) تغییر دهد.

لایت سوئیچ Light Switch
نمایی از دو لایت سوئیچ در حالت های روشن و خاموش

تفاوت Checkbox و Radio button

دکمه های رادیویی (Radio button) هم مشابه با جعبه های بررسی برای انتخاب گزینه ها به کار می‌روند با این تفاوت که دکمه های رادیویی به کاربر اجازه می‌دهند فقط یک گزینه را از میان مجموعه‌ای از گزینه ها انتخاب کند در حالیکه چک باکس ها امکان انتخاب کردن چند گزینه به طور همزمان و یا انتخاب هیچ کدام از گزینه ها را برای کاربر مهیا می‌کنند.

در واقع در هر گروه از Radio button ها تنها یک دکمه می‌تواند در حالت انتخاب شده قرار داشته باشد اما هر Checkbox به طور مجزا می‌تواند در حالت انتخاب شده یا انتخاب نشده قرار بگیرد.

برای مثال در مورد انتخاب حیوان خانگی مورد علاقه از میان گزینه های گربه، سگ، ماهی آکواریومی و پرنده، اگر از دکمه های رادیویی استفاده شده باشد کاربر تنها می‌تواند نام یک حیوان را انتخاب کند. این درحالیست که با استفاده از چک باکس ها امکان انتخاب هیچ کدام یا چند حیوان نیز فراهم می‌باشد.

چک باکس های سه حالته

برخی از Checkbox ها علاوه بر دو حالت معمولی انتخاب شده و انتخاب نشده از حالت سومی موسوم به نامشخص (Indeterminate) یا ترکیبی (Mixed) نیز پشتیبانی می‌کنند. این حالت معمولا در قالب یک مربع توپر یا یک خط تیره در داخل چک باکس نمایش داده می‌شود و به معنای آنست که چک باکس در هیچ کدام از حالت‌های انتخاب شده و انتخاب نشده قرار ندارد.

معمولا وضعیت این Checkbox ها به صورت مستقیم توسط کاربر قابل تغییر به حالت نامشخص نمی‌باشد. در واقع زمانی که کاربر روی چک باکسی که دارای این وضعیت است کلیک می‌کند وضعیت آن به انتخاب شده تغییر پیدا می‌کند و از آن پس با تغییر وضعیت مستقیم، چک باکس بین حالت های انتخاب نشده و انتخاب شده سوئیچ می‌کند.

نمونه‌ای از کاربرد این نوع Checkbox ها را می‌توان در برخی از نمایش‌های چند گزینه‌ای با ساختار سلسله مراتبی مشاهده نمود (مانند انتخاب فایل ها و فولدرها یا انتخاب ویژگی ها در نمایش درختی با کمک چک باکس ها). در چنین حالتی اگر تمام چک باکس های فرزند در حالت انتخاب شده یا انتخاب نشده قرار داشته باشند چک باکس والد نیز در همان حالت قرار می‌گیرد. اما در صورتی که تعدادی از فرزندها در حالت انتخاب شده و تعدادی دیگر در حالت انتخاب نشده قرار داشته باشند، چک باکس والد در حالت Indeterminate قرار می‌گیرد.

گفتنی است زمانی که جعبه والد در حالت Indeterminate قرار دارد با کلیک کردن روی جعبه، وضعیت آن همراه با تمام چک باکس های فرزند به حالت انتخاب شده تغییر پیدا می‌کند و با کلیک مجدد، وضعیت چک باکس والد و تمام فرزندهای آن در حالت انتخاب نشده قرار می‌گیرد.

چک باکس سه حالته Three state Checkbox
نمایی از پنجره Windows Features و استفاده از چک باکس های سه حالته – در این مثال گزینه Media Features و تمام گزینه های زیرمجموعه آن در حالت انتخاب شده هستند. گزینه Microsoft Message Queue Server و تمام زیرمجموعه های آن نیز در حالت انتخاب نشده هستند. اما گزینه Print and Document Services که با مربع توپر نمایش داده شده است در حالت Indeterminate است چرا که تنها دو گزینه از چهار گزینه زیرمجموعه آن در حالت انتخاب شده قرار دارند.

جعبه های بررسی در HTML

برای ایجاد یک چک باکس در HTML از المان <input> با نوع checkbox (به صورت <input type=”checkbox”>) مشابه با مثال زیر استفاده می‌شود.

<form action="/action_page.php">
  <p>Please select your computer Memory Capacity:</p>
  <input type="checkbox" id="upto512" name="capacity" value="upto512">
  <label for="upto512">Up to 512 MB</label><br>
  <input type="checkbox" id="one" name="capacity" value="one">
  <label for="one">1 GB</label><br>
  <input type="checkbox" id="two" name="capacity" value="two">
  <label for="two">2 GB</label><br>
  <input type="checkbox" id="four" name="capacity" value="four">
  <label for="four">4 GB</label><br>
  <input type="checkbox" id="eight" name="capacity" value="eight">
  <label for="eight">8 GB</label><br>
  <input type="checkbox" id="sixteen" name="capacity" value="sixteen">
  <label for="sixteen">16 GB</label><br><br>
  <input type="submit" value="Submit">
</form>

لیبل های چک باکس ها در HTML

در مثال فوق برای مشخص کردن برچسب جعبه ها از تگ <label> استفاده شده است. به این ترتیب که مقدار خصوصیت for در این المان ها مساوی با مقدار خصوصیت id اختصاص داده شده برای تگ <input> متناظر خواهد بود. کاربر با کلیک روی خود جعبه یا برچسب اختصاص داده شده به آن می‌تواند وضعیت جعبه را تغییر دهد.

البته در صورتی که تگ <input> در داخل تگ <label> قرار داده شود بدون استفاده از ویژگی های id و for هم المان <label> به المان <input> ای که دربرگرفته است تخصیص داده می‌شود. (با اینحال پیشنهاد می‌شود در این حالت هم مشابه نمونه زیر از ویژگی id و for استفاده شود).

<label for="upto512">
  <input type="checkbox" id="upto512" name="capacity" value="upto512">
  Up to 512 MB
</label>

گفتنی است اسکرین ریدرها نیز معمولا متن لیبل را هنگام قرار گرفتن فوکس روی چک باکس برای کاربر می‌خوانند. این قابلیت به خصوص برای افراد نابینا حین تعامل با صفحات وب مفید واقع می‌شود.

ویژگی name

برای چک باکس های مرتبط در HTML معمولا از مقدار یکسان برای خاصیت name در تگ <input> استفاده می‌شود. به عنوان مثال تمام تگ های <input> در مثال فوق دارای مقدار “capacity” برای این خاصیت هستند.

ویژگی value

توجه داشته باشید مقدار منتسب به value در حالت عادی به کاربر نمایش داده نمی‌شود. این مقدار در واقع همان چیزی است که در صورت قرار داشتن چک باکس در حالت انتخاب شده هنگام سابمیت کردن همراه با نام المان به شکل name=value برای سرور ارسال می‌شود.

برای نمونه اگر چک باکس اول و دوم در مثال بالا انتخاب شده باشند اطلاعات فرم سابمیت شده مشابه عبارت capacity=upto512&capacity=one خواهد بود. توجه داشته باشید اگر value برای یک Checkbox مشخص نشده باشد مقدار پیشفرض on برای آن درنظر گرفته می‌شود و نتیجه به صورت capacity=on خواهد بود که در این مثال براساس آن امکان تشخیص جعبه انتخاب شده وجود ندارد. بنابراین توصیه می‌شود به خصوص اگر از نام یکسانی برای چند Checkbox استفاده کرده‌اید مقدار مناسبی برای ویژگی value تخصیص بدهید.

انتخاب Checkbox به صورت پیشفرض در HTML

برای آنکه یک Checkbox به صورت پیشفرض در حالت انتخاب شده قرار گیرد می‌توانید خاصیت checked را به تگ <input> موردنظر اضافه کنید.

برای نمونه اگر تگ <input> اول در مثال فوق را به شکل زیر تغییر دهید پس از لود شدن صفحه، این گزینه به صورت پیشفرض انتخاب شده خواهد بود.

<input type="checkbox" id="upto512" name="capacity" value="upto512" checked>

پیوندهای پیشنهادی تک دیک

لینک واژه در ویکیپدیا

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

6 thoughts on “چک باکس Checkbox

  • اردیبهشت ۱۶, ۱۴۰۲ در t ۱۰:۱۴ ب٫ظ
    Permalink

    سلام علیکم
    دوست عزیز بنده میخواهم توسط کد علامت چک باکس را قرار داده ویا بردارم . لطفا راهنمایی بفرمائید .
    لطفا پاسخ را به ایمیل اینجانب ارسال بفرمائید . متشکرم
    باتشکر
    سید هاشم غفوری یزدی

    پاسخ دادن
    • اردیبهشت ۲۰, ۱۴۰۲ در t ۱:۴۴ ب٫ظ
      Permalink

      سلام وقت شما بخیر. بسته به زبان های برنامه نویسی مختلف و پلتفرم موردنظرتون کد مورد نیاز متفاوت هست. لطفا از راهنماهای زبان برنامه نویسی موردنظر استفاده کنید.

      پاسخ دادن
  • خرداد ۲۹, ۱۴۰۰ در t ۴:۰۷ ب٫ظ
    Permalink

    سلام چطور میتونم برنامه ای بنویسم که اگر چک باکسم تیک داشت کاری رو انجام بده؟

    پاسخ دادن
    • خرداد ۳۰, ۱۴۰۰ در t ۳:۰۰ ب٫ظ
      Permalink

      سلام؛ به پلتفرم و زبان برنامه نویسی مدنظرتون اشاره ای نکردید. این موضوع متفاوت هست بسته به مواردی که خدمتتون عرض کردم.

      پاسخ دادن
  • دی ۲۸, ۱۳۹۹ در t ۱:۴۲ ق٫ظ
    Permalink

    من می خواستم دکمه های تعیین وقت رو در افزونه بوکلی از حالت دکمه رادیویی به چک باکس تغییر بدم که بشه چند تا گزینه رو به دلخواه انتخاب کرد
    لطفا راهنمایی می کنید؟

    پاسخ دادن
    • دی ۲۸, ۱۳۹۹ در t ۲:۱۳ ب٫ظ
      Permalink

      سلام؛ دوست گرامی نیاز به تغییر کدهای پلاگین داره. اگر تخصصی در این زمینه ندارید لازم هست این کار رو به فرد دیگری بسپارید یا در صفحه مربوط به پلاگین از سازنده کمک بگیرید.

      پاسخ دادن

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *