الفرق بين المراجعتين لصفحة: «HTML/input/checkbox»

من موسوعة حسوب
< HTML‏ | input
لا ملخص تعديل
 
تعديل الأمثلة
 
(4 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 3: سطر 3:


أزرار الانتقاء ([[HTML/input/radio|radio buttons]]) تشبه صناديق التأشير (checkboxes) لكن هنالك فرق مهم بينهما، فأزرار الانتقاء تستخدم لاختيار قيمة من مجموعة قيم، بينما صناديق التأشير تسمح لك بتفعيل أو تعطيل القيم. فلو كانت هنالك عدِّة خيارات، فتسمح أزرار الانتقاء باختيار قيمة منها، بينما صناديق التأشير تسمح بتحديد عدِّة قيم.<syntaxhighlight lang="html">
أزرار الانتقاء ([[HTML/input/radio|radio buttons]]) تشبه صناديق التأشير (checkboxes) لكن هنالك فرق مهم بينهما، فأزرار الانتقاء تستخدم لاختيار قيمة من مجموعة قيم، بينما صناديق التأشير تسمح لك بتفعيل أو تعطيل القيم. فلو كانت هنالك عدِّة خيارات، فتسمح أزرار الانتقاء باختيار قيمة منها، بينما صناديق التأشير تسمح بتحديد عدِّة قيم.<syntaxhighlight lang="html">
<input id="checkBox" type="checkbox">
<label for="checkbox">صندوق تأشير</label>
<input type="checkbox" name="checkbox" id="checkbox">
 
</syntaxhighlight>
</syntaxhighlight>


سطر 11: سطر 13:
   <div>
   <div>
     <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
     <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
     <label for="subscribeNews">Subscribe to newsletter?</label>
     <label for="subscribeNews">الاشتراك في قائمة الأخبار</label>
   </div>
   </div>
   <div>
   <div>
     <button type="submit">Subscribe</button>
     <button type="submit">اشترك</button>
   </div>
   </div>
</form>
</form>
سطر 32: سطر 34:
سنضع في المثال الآتي عدِّة صناديق تأشير للسماح للمستخدم باختيار ما هي الأمور التي يهتم بها:<syntaxhighlight lang="html">
سنضع في المثال الآتي عدِّة صناديق تأشير للسماح للمستخدم باختيار ما هي الأمور التي يهتم بها:<syntaxhighlight lang="html">
<fieldset>
<fieldset>
   <legend>Choose your interests</legend>
   <legend>اختر هواياتك</legend>
   <div>
   <div>
     <input type="checkbox" id="coding" name="interest" value="coding">
     <input type="checkbox" id="coding" name="interest" value="coding">
     <label for="coding">Coding</label>
     <label for="coding">البرمجة</label>
   </div>
   </div>
   <div>
   <div>
     <input type="checkbox" id="music" name="interest" value="music">
     <input type="checkbox" id="cooking" name="interest" value="cooking">
     <label for="music">Music</label>
     <label for="cooking">الطبخ</label>
   </div>
   </div>
</fieldset>
</fieldset>
</syntaxhighlight>أعطينا -في الشيفرة السابقة- صناديق التأشير نفس القيمة للخاصية <code>name</code>، فلو كان الصندوقان مفعلين عند إرسال النموذج فستكون القيمة المُرسَلة إلى الخادوم على الشكل <code>interest=coding&interest=music</code>، وعندما تصل هذه البيانات إلى الخادوم فعليك الحصول عليها على شكل مصفوفة من القيم المرتبطة ببعضها والتعامل معها وفق ذلك.
</syntaxhighlight>أعطينا -في الشيفرة السابقة- صناديق التأشير نفس القيمة للخاصية <code>name</code>، فلو كان الصندوقان مفعلين عند إرسال النموذج فستكون القيمة المُرسَلة إلى الخادوم على الشكل <code>interest=coding&interest=cooking</code>، وعندما تصل هذه البيانات إلى الخادوم فعليك الحصول عليها على شكل مصفوفة من القيم المرتبطة ببعضها والتعامل معها وفق ذلك.
=== تفعيل صناديق التأشير افتراضيًا ===
=== تفعيل صناديق التأشير افتراضيًا ===
لجعل أحد صناديق التأشير مُفعّلًا افتراضيًا، فاستخدم الخاصية <code>checked</code> عليه، كما في المثال الآتي:<syntaxhighlight lang="html">
لجعل أحد صناديق التأشير مُفعّلًا افتراضيًا، فاستخدم الخاصية <code>checked</code> عليه، كما في المثال الآتي:<syntaxhighlight lang="html">
<fieldset>
<fieldset>
   <legend>Choose your interests</legend>
   <legend>اختر هواياتك</legend>
   <div>
   <div>
     <input type="checkbox" id="coding" name="interest" value="coding" checked>
     <input type="checkbox" id="coding" name="interest" value="coding" checked>
     <label for="coding">Coding</label>
     <label for="coding">البرمجة</label>
   </div>
   </div>
   <div>
   <div>
     <input type="checkbox" id="music" name="interest" value="music">
     <input type="checkbox" id="cooking" name="interest" value="cooking">
     <label for="music">Music</label>
     <label for="cooking">الطبخ</label>
   </div>
   </div>
</fieldset>
</fieldset>
سطر 72: سطر 74:
أي أنَّ الحالة <code>indeterminate</code> تعني أنَّنا بدأنا بجمع مكوِّنات الوصفة لكنها لم تكتمل بعد:<syntaxhighlight lang="html">
أي أنَّ الحالة <code>indeterminate</code> تعني أنَّنا بدأنا بجمع مكوِّنات الوصفة لكنها لم تكتمل بعد:<syntaxhighlight lang="html">
<fieldset>
<fieldset>
   <legend>Complete the recipe</legend>
   <legend>أكمل الوصفة</legend>
     <div>
     <div>
     <input type="checkbox" id="EnchTbl" name="EnchTbl">
     <input type="checkbox" id="pizza" name="pizza">
     <label for="EnchTbl">Enchantment table</label>
     <label for="pizza">بيتزا</label>
     <ul>
     <ul>
       <li>
       <li>
         <input type="checkbox" id="book" name="ingredient" value="book">
         <input type="checkbox" id="tomato" name="ingredient" value="tomato">
         <label for="book">Book</label>
         <label for="tomato">بندورة (طماطم)</label>
       </li>
       </li>
       <li>
       <li>
         <input type="checkbox" id="diamonds" name="ingredient" value="diamonds">
         <input type="checkbox" id="cheese" name="ingredient" value="cheese">
         <label for="diamonds">Diamonds (x2)</label>
         <label for="cheese">جبنة</label>
       </li>
       </li>
       <li>
       <li>
         <input type="checkbox" id="obsidian" name="ingredient" value="obsidian">
         <input type="checkbox" id="dough" name="ingredient" value="dough">
         <label for="obsidian">Obsidian (x4)</label>
         <label for="dough">عجينة</label>
       </li>
       </li>
     </ul>
     </ul>
سطر 93: سطر 95:
</fieldset>
</fieldset>
</syntaxhighlight>شيفرة JavaScript:<syntaxhighlight lang="javascript">
</syntaxhighlight>شيفرة JavaScript:<syntaxhighlight lang="javascript">
  var overall = document.querySelector('input[id="EnchTbl"]');
// تحديد العنصر الرئيسي
  var ingredients = document.querySelectorAll('ul input');
var overall = document.querySelector('input[id="pizza"]');
// تحديد جميع حقول الإدخال
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);
}


  overall.addEventListener('click', function(e) {
// الدالة التي ستستدعى عند النقر على مكوانات الوصفة
    e.preventDefault();
// تنظر هذه الدالة إلى عدد العناصر المختارة
  });
// إذا كانت كلها مختارة فسيصبح العنصر الرئيسي مختارًا


// إذا كان بعضها مختارًا وبعضها لم ينقر عليه المستخدم بعد، فستكون
// حالة العنصر الرئيسي غير معروفة
function updateDisplay() {
  var checkedCount = 1;
   for(var i = 0; i < ingredients.length; i++) {
   for(var i = 0; i < ingredients.length; i++) {
     ingredients[i].addEventListener('click', updateDisplay);
     if(ingredients[i].checked) {
      checkedCount++;
    }
   }
   }


   function updateDisplay() {
   if(checkedCount === ingredients.length + 1) {
    var checkedCount = 1;
    overall.checked = true;
    for(var i = 0; i < ingredients.length; i++) {
    overall.indeterminate = false;
      if(ingredients[i].checked) {
  } else if(checkedCount <= ingredients.length + 1 && checkedCount > 1) {
        checkedCount++;
    overall.checked = false;
      }
    overall.indeterminate = true;
    }
  } else {
 
    overall.checked = false;
    if(checkedCount === ingredients.length + 1) {
    overall.indeterminate = false;
      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;
    }
   }
   }
}
</syntaxhighlight>لاحظ أنَّك إذا أرسلتَ نموذجًا فيه صندوق تأشير حالته غير معروفة فسيُعامل كانه غير مُفعّل، أي لن تُرسَل أيّة بيانات إلى الخادوم لتمثيله.
</syntaxhighlight>لاحظ أنَّك إذا أرسلتَ نموذجًا فيه صندوق تأشير حالته غير معروفة فسيُعامل كانه غير مُفعّل، أي لن تُرسَل أيّة بيانات إلى الخادوم لتمثيله.


سطر 143: سطر 155:
|مدعوم
|مدعوم
|}
|}
__لصق_فهرس__
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:Forms]]
[[تصنيف:HTML Forms|{{SUBPAGENAME}}]]
[[تصنيف:HTML]]
[[تصنيف:HTML Input Types|{{SUBPAGENAME}}]]
[[تصنيف:Input Types]]

المراجعة الحالية بتاريخ 11:42، 25 فبراير 2018

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

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

<label for="checkbox">صندوق تأشير</label>
<input type="checkbox" name="checkbox" id="checkbox">

الخاصية value

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

<form>
  <div>
    <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
    <label for="subscribeNews">الاشتراك في قائمة الأخبار</label>
  </div>
  <div>
    <button type="submit">اشترك</button>
  </div>
</form>

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

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

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

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

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

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

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

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

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

<fieldset>
  <legend>اختر هواياتك</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding">
    <label for="coding">البرمجة</label>
  </div>
  <div>
    <input type="checkbox" id="cooking" name="interest" value="cooking">
    <label for="cooking">الطبخ</label>
  </div>
</fieldset>

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

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

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

<fieldset>
  <legend>اختر هواياتك</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked>
    <label for="coding">البرمجة</label>
  </div>
  <div>
    <input type="checkbox" id="cooking" name="interest" value="cooking">
    <label for="cooking">الطبخ</label>
  </div>
</fieldset>

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

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

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

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

inputInstance.indeterminate = true;

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

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

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

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

<fieldset>
  <legend>أكمل الوصفة</legend>
    <div>
    <input type="checkbox" id="pizza" name="pizza">
    <label for="pizza">بيتزا</label>
    <ul>
      <li>
        <input type="checkbox" id="tomato" name="ingredient" value="tomato">
        <label for="tomato">بندورة (طماطم)</label>
      </li>
      <li>
        <input type="checkbox" id="cheese" name="ingredient" value="cheese">
        <label for="cheese">جبنة</label>
      </li>
      <li>
        <input type="checkbox" id="dough" name="ingredient" value="dough">
        <label for="dough">عجينة</label>
      </li>
    </ul>
    </div>
</fieldset>

شيفرة JavaScript:

// تحديد العنصر الرئيسي
var overall = document.querySelector('input[id="pizza"]');
// تحديد جميع حقول الإدخال
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
مدعوم مدعوم مدعوم مدعوم مدعوم