الحقل checkbox

عناصر <input> ذات النوع checkbox تُعرَض افتراضيًا كصناديق مربعة يمكن التأشير عليها لتفعيله، كالتي قد تراها في بعض الأوراق الحكومية. فهي تسمح لك باختيار قيم لإرسالها مع النموذج.

أزرار الانتقاء (radio buttons) تشبه صناديق التأشير (checkboxes) لكن هنالك فرق مهم بينهما، فأزرار الانتقاء تستخدم لاختيار قيمة من مجموعة قيم، بينما صناديق التأشير تسمح لك بتفعيل أو تعطيل القيم. فلو كانت هنالك عدِّة خيارات، فتسمح أزرار الانتقاء باختيار قيمة منها، بينما صناديق التأشير تسمح بتحديد عدِّة قيم.

<input id="checkBox" type="checkbox">

الخاصية value

تحتوي الخاصية value على سلسلة نصية (DOMString)، وهذه القيمة لا تظهر للمستخدم وإنما ستُرسَل إلى الخادوم مرتبطةً مع اسم صندوق التأشير (الخاصية name):

<form>
  <div>
    <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
    <label for="subscribeNews">Subscribe to newsletter?</label>
  </div>
  <div>
    <button type="submit">Subscribe</button>
  </div>
</form>

صندوق التأشير في المثال السابق له الاسم subscribe والقيمة newsletter، واللتان سترسلان إلى الخادوم عند إرسال النموذج على الشكل subscribe=newsletter.

إذا لم تُحدَّد قيمة للخاصية value فستُعطى القيمة الافتراضية on، أي ستكون البيانات التي ستُرسَل إلى النموذج على الشكل subscribe=on.

إذا كان صندوق التأشير غير مُفعّل عند إرسال النموذج، فلن تُرسَل أيّة قيمة إلى الخادوم لتقول أنَّ الصندوق غير مُفعّل.

استخدام صناديق التأشير

شرحنا الاستعمال الأساسي لصناديق التأشير أعلاه، لكن دعنا نلقي نظرة على الميزات والتقنيات الشائعة والتي تستخدم مع صناديق التأشير.

التعامل مع أكثر من صندوق تأشير

رأينا في المثال السابق صندوق تأشير وحيد، لكن من الشائع في النماذج العملية أن يكون هنالك عدِّة صناديق تأشير.

إذا كانت صناديق التأشير غير متعلقة ببعضها، فيمكنك التعامل معها بسهولة كما بيّنا أعلاه، لكن إن كانت متعلقة مع بعضها فالأمر يحتاج إلى تفصيل...

سنضع في المثال الآتي عدِّة صناديق تأشير للسماح للمستخدم باختيار ما هي الأمور التي يهتم بها:

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding">
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">Music</label>
  </div>
</fieldset>

أعطينا -في الشيفرة السابقة- صناديق التأشير نفس القيمة للخاصية name، فلو كان الصندوقان مفعلين عند إرسال النموذج فستكون القيمة المُرسَلة إلى الخادوم على الشكل interest=coding&interest=music، وعندما تصل هذه البيانات إلى الخادوم فعليك الحصول عليها على شكل مصفوفة من القيم المرتبطة ببعضها والتعامل معها وفق ذلك.

تفعيل صناديق التأشير افتراضيًا

لجعل أحد صناديق التأشير مُفعّلًا افتراضيًا، فاستخدم الخاصية checked عليه، كما في المثال الآتي:

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked>
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">Music</label>
  </div>
</fieldset>

توفير منطقة أكبر لتسهيل الضغط على صندوق التأشير

ربما لاحظتَ في الأمثلة السابقة أنَّ بإمكانك تفعيل صندوق التأشير بالضغط على عنصر <label> المرتبط به أو على صندوق التأشير نفسه، وهذه الميزة مفيدة جدًا إذ تجعل من السهل الضغط على الخيار الذي تريده، خصوصًا في الأجهزة ذات الشاشات الصغيرة مثل الهواتف المحمولة.

صناديق التأشير ذات الحالة غير المعروفة

هنالك حالة غير معروفة (indeterminate) لصناديق التأشير، التي يمكن ضبطها عبر الخاصية indeterminate على الكائن HTMLInputElement في JavaScript (لا يمكن ضبط هذه القيمة في HTML مباشرةً):

inputInstance.indeterminate = true;

الحالة غير المعروفة لصناديق التأشير تُعرَض عادةً على شكل خط أفقي في أغلبية المتصفحات بدلًا من إشارة «صح».

لا توجد هنالك حالات استخدام كثيرة لهذه الخاصيةـ لكن المثال التالي سيبيّن إحداها. حيث يتتبع هذا المثال مكوِّنات إحدى الوصفات التي تحاول جمعها، ويمكنك التأشير على صناديق التأشير للمكونات، وستتحقق دالة JavaScript من العدد الكلي للمكونات التي حصلتَ عليها:

• إذا لم يتم التأشير على أيّ مكوِّن، فسيترك صندوق التأشير المرتبط باسم الوصفة غير مؤشر.
• إذا تم التأشير على مكوِّن واحد أو مكوِّنين، فسيُضبَط صندوق التأشير المرتبط باسم الوصفة إلى indeterminate.
• إذا تم التأشير على المكونات كلها، فسيُضبَط صندوق التأشير المرتبط باسم الوصفة إلى checked.

أي أنَّ الحالة indeterminate تعني أنَّنا بدأنا بجمع مكوِّنات الوصفة لكنها لم تكتمل بعد:

<fieldset>
  <legend>Complete the recipe</legend>
    <div>
    <input type="checkbox" id="EnchTbl" name="EnchTbl">
    <label for="EnchTbl">Enchantment table</label>
    <ul>
      <li>
        <input type="checkbox" id="book" name="ingredient" value="book">
        <label for="book">Book</label>
      </li>
      <li>
        <input type="checkbox" id="diamonds" name="ingredient" value="diamonds">
        <label for="diamonds">Diamonds (x2)</label>
      </li>
      <li>
        <input type="checkbox" id="obsidian" name="ingredient" value="obsidian">
        <label for="obsidian">Obsidian (x4)</label>
      </li>
    </ul>
    </div>
</fieldset>

شيفرة JavaScript:

  var overall = document.querySelector('input[id="EnchTbl"]');
  var ingredients = document.querySelectorAll('ul input');

  overall.addEventListener('click', function(e) {
    e.preventDefault();
  });

  for(var i = 0; i < ingredients.length; i++) {
    ingredients[i].addEventListener('click', updateDisplay);
  }

  function updateDisplay() {
    var checkedCount = 1;
    for(var i = 0; i < ingredients.length; i++) {
      if(ingredients[i].checked) {
        checkedCount++;
      }
    }

    if(checkedCount === ingredients.length + 1) {
      overall.checked = true;
      overall.indeterminate = false;
    } else if(checkedCount <= ingredients.length + 1 && checkedCount > 1) {
      overall.checked = false;
      overall.indeterminate = true;
    } else {
      overall.checked = false;
      overall.indeterminate = false;
    }
  }

لاحظ أنَّك إذا أرسلتَ نموذجًا فيه صندوق تأشير حالته غير معروفة فسيُعامل كانه غير مُفعّل، أي لن تُرسَل أيّة بيانات إلى الخادوم لتمثيله.

التحقق من الحقل

تدعم صناديق التأشير التحقق من الحقل (validation)، لكن أغلبية حالات ValidyState ستكون false.

إذا كان لصندوق التأشير الخاصية required لكنه ليس مفعّلًا فستكون قيمة ValidityState.valueMissing مساويةً إلى true.

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم