چک باکس Checkbox

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

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

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

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

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

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

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

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

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

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

تفاوت Checkbox و Radio button

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

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

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

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

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

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

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

گفتنی است زمانی که جعبه والد در حالت 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>