وثائق HTML قابلة للتشغيل: مربع الاختيار

Q: كيف أنشئ مربع اختيار في HTML؟

استخدم داخل تسمية: I agree . التسمية تجعل النص قابلًا للنقر أيضًا.

Q: كيف أجعل مربع الاختيار محددًا افتراضيًا؟

أضف السمة checked: . وجودها هو ما يهم، لذلك checked="false" تحدده مع ذلك. وفي JavaScript اضبط box.checked = true أو false.

Q: كيف أحصل على قيمة مربع الاختيار في JavaScript؟

اقرأ box.checked، وهي true أو false. أما box.value فهي القيمة التي سيرسلها، وتبقى كما هي سواء كان المربع محددًا أم لا. استمع إلى حدث change لتستجيب عند تبديله.

Q: كيف أغيّر لون مربع الاختيار؟

اضبط accent-color عليه: input[type=checkbox] { accent-color: #16a34a; }. ولمظهر مخصص بالكامل، اضبط appearance: none وارسم المربع وعلامة الصح بنفسك بـ CSS.

كيف تنشئ مربع اختيار في HTML

مربع الاختيار هو <input type="checkbox">. ضعه داخل <label> مع نصه، كي يبدّله النقر على النص أيضًا. حدد مربعًا أو الاثنين واضغط Save لترى ما يرسله النموذج:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox</title>
</head>
<body>
  <form>
    <p><label><input type="checkbox" name="newsletter" value="yes"> Send me the newsletter</label></p>
    <p><label><input type="checkbox" name="updates" checked> Product updates</label></p>
    <button type="submit">Save</button>
  </form>
</body>
</html>

في الحالة الافتراضية يرسل النموذج updates=on فقط. قاعدتان تفسران ذلك:

المربع المحدد يرسل name=value. المربع الثاني بلا value، فيرسل القيمة الافتراضية on.
المربع غير المحدد لا يرسل شيئًا على الإطلاق. لا newsletter=no ولا قيمة فارغة: الاسم غائب عن البيانات.

checked في HTML تحدد الحالة الابتدائية. ومثل كل سمة منطقية، وجودها هو ما يهم: checked="false" تحدد المربع مع ذلك.

سمات مربع الاختيار

السمة	وظيفتها
`name`	المفتاح الذي يُرسل حين يكون محددًا
`value`	ما يُرسل حين يكون محددًا (الافتراضي `on`)
`checked`	محدد عند تحميل الصفحة
`required`	لن يُرسل النموذج حتى يُحدد هذا المربع
`disabled`	لا يمكن تبديله ولا يُرسل

مجموعة من مربعات الاختيار

لسؤال «اختر ما تشاء من هذه»، أعطِ كل المربعات الاسم name نفسه وقيمة value مختلفة. وضعها داخل <fieldset> مع <legend> كي يكون للمجموعة اسم:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Topics you like</legend>
      <label><input type="checkbox" name="topic" value="html" checked> HTML</label>
      <label><input type="checkbox" name="topic" value="css" checked> CSS</label>
      <label><input type="checkbox" name="topic" value="js"> JavaScript</label>
    </fieldset>
    <p><button type="submit">Save</button></p>
  </form>
</body>
</html>

يرسل النموذج topic=html وtopic=css: الاسم نفسه مرتين. معظم أطر الخوادم تقرأ ذلك كقائمة. PHP هو الاستثناء: يحتفظ بالأخير فقط ما لم ينتهِ الاسم بقوسين، name="topic[]". وفي JavaScript تُرجع new FormData(form).getAll('topic') القيمة ['html', 'css'].

إرسال قيمة حين يكون المربع غير محدد

حين يحتاج الخادم إلى «لا» صريحة، ضع حقلًا مخفيًا بالاسم نفسه قبل مربع الاختيار. حين يكون غير محدد تُرسل القيمة المخفية وحدها، وحين يكون محددًا تُرسل الاثنتان ويأخذ الخادم الأخيرة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unchecked value</title>
</head>
<body>
  <form>
    <input type="hidden" name="marketing" value="no">
    <label><input type="checkbox" name="marketing" value="yes"> Marketing emails</label>
    <p>
      <label><input type="checkbox" name="terms" value="accepted" required> I accept the terms</label>
    </p>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

اضغط Continue: يرفض النموذج الإرسال حتى يُحدد مربع الشروط، لأنه required. بعدها يرسل marketing=no وterms=accepted، أو marketing=no وmarketing=yes وterms=accepted إن كان المربع الأول محددًا. أطر مثل Rails تولّد زوج الحقل المخفي هذا بالضبط. تحقق من طريقة قراءة خادمك للاسم المكرر قبل الاعتماد عليه.

تحديد الكل والحالة الوسطى

لمربع الاختيار مظهر ثالث، شرطة، يعني «بعضها لا كلها». هذه الحالة موجودة في JavaScript فقط: اضبط box.indeterminate = true. يستخدمها مربع «تحديد الكل» حين تكون بعض المربعات التي يتحكم بها محددة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select all</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    ul { list-style: none; padding-inline-start: 24px; margin: 4px 0; }
  </style>
</head>
<body>
  <label><input type="checkbox" id="all"> Select all</label>
  <ul>
    <li><label><input type="checkbox" class="item" checked> Email</label></li>
    <li><label><input type="checkbox" class="item"> SMS</label></li>
    <li><label><input type="checkbox" class="item"> Push</label></li>
  </ul>

  <script>
    const all = document.querySelector('#all');
    const items = [...document.querySelectorAll('.item')];

    const sync = () => {
      const count = items.filter((box) => box.checked).length;
      all.checked = count === items.length;
      all.indeterminate = count > 0 && count < items.length;
    };

    all.addEventListener('change', () => {
      items.forEach((box) => { box.checked = all.checked; });
    });
    items.forEach((box) => box.addEventListener('change', sync));
    sync();
  </script>
</body>
</html>

indeterminate تغيّر المظهر فقط (وما تعلنه قارئات الشاشة: «مختلط» أو «محدد جزئيًا»). يبقى المربع في الأساس محددًا أو غير محدد، وهذا ما يرسله النموذج. النقر على مربع في الحالة الوسطى يزيل الشرطة ويبدّله.

استخدم حدث change للاستجابة لمربع الاختيار، واقرأ box.checked لمعرفة حالته. box.value لا تتغير عند تبديل المربع.

تنسيق مربعات الاختيار

أسرع تغيير هو accent-color، الذي يعيد تلوين مربع الاختيار الأصلي ويحتفظ بكل سلوكه. ولمظهر مختلف تمامًا، يزيل appearance: none الرسم الأصلي ويتيح لك تنسيق الحقل كأي صندوق:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .accent { accent-color: #16a34a; width: 20px; height: 20px; }

    .custom {
      appearance: none;
      width: 20px;
      height: 20px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 5px;
      display: grid;
      place-content: center;
    }
    .custom::before {
      content: "";
      width: 10px;
      height: 6px;
      border: 3px solid #fff;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg) translate(1px, -1px);
      visibility: hidden;
    }
    .custom:checked { background: #2563eb; border-color: #2563eb; }
    .custom:checked::before { visibility: visible; }
    .custom:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="accent" checked> accent-color</label>
  <label><input type="checkbox" class="custom" checked> appearance: none</label>
  <label><input type="checkbox" class="custom"> appearance: none, unchecked</label>
</body>
</html>

المربع المخصص ما زال مربع اختيار حقيقيًا: يتبدل بالنقر وبالمسافة، ويُرسل مع النموذج، ويُعلن عنه كمربع اختيار. ارسمه بـ :checked وأبقِ نمط :focus-visible، لأنه من دون الرسم الأصلي لا توجد حلقة تركيز لم تضفها بنفسك.

زر تبديل (Toggle)

المفتاح مربع اختيار يعني «مشغّل أو متوقف الآن» لا «ضمّن هذا». ارسمه بـ appearance: none وأضف role="switch" كي تعلن قارئات الشاشة عن مفتاح مشغّل أو متوقف بدلًا من مربع اختيار محدد:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Toggle switch</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: inline-flex; align-items: center; gap: 10px; }
    .switch {
      appearance: none;
      margin: 0;
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: #9ca3af;
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
    }
    .switch::before {
      content: "";
      position: absolute;
      top: 3px;
      inset-inline-start: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      transition: inset-inline-start 0.2s;
    }
    .switch:checked { background: #16a34a; }
    .switch:checked::before { inset-inline-start: 23px; }
    .switch:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="switch" role="switch" name="dark" checked> Dark mode</label>
</body>
</html>

inset-inline-start تضع المقبض ابتداءً من بداية السطر، فينزلق المفتاح في الاتجاه المعاكس في الصفحات المكتوبة من اليمين إلى اليسار، كما يجب. للخيارات المجمّعة التي لا يمكن اختيار إلا واحد منها، راجع زر الاختيار radio.

أخطاء شائعة

توقع false للمربع غير المحدد. لا يُرسل شيء. عامِل الاسم الغائب كـ «متوقف» على الخادم، أو أضف الحقل المخفي.
checked="false". تحدد المربع مع ذلك. احذف السمة.
مربع اختيار بلا تسمية، أو بجانبه نص ليس <label>. يصبح المربع الصغير الهدف الوحيد للنقر، وتعلن قارئات الشاشة «مربع اختيار» بلا اسم. راجع label في HTML.
نسيان value، فيرسل كل مربع في المجموعة on ولا يستطيع الخادم التمييز بينها.
قراءة box.value لمعرفة إن كان محددًا. استخدم box.checked.
مربعات اختيار لسؤال «اختر واحدًا». هذا ما وُجدت أزرار الاختيار من أجله.

الأسئلة الشائعة

كيف أنشئ مربع اختيار في HTML؟

استخدم <input type="checkbox"> داخل تسمية: <label><input type="checkbox" name="terms" value="yes"> I agree</label>. التسمية تجعل النص قابلًا للنقر أيضًا.

كيف أجعل مربع الاختيار محددًا افتراضيًا؟

أضف السمة checked: <input type="checkbox" name="news" checked>. وجودها هو ما يهم، لذلك checked="false" تحدده مع ذلك. وفي JavaScript اضبط box.checked = true أو false.

ما القيمة التي يرسلها مربع الاختيار غير المحدد؟

لا شيء. المربع غير المحدد يُستبعد كليًا من البيانات المرسلة. والمحدد يرسل value الخاصة به، أو on إن لم تكن له value. إذا احتاج الخادم إلى «لا» صريحة، فضع حقلًا مخفيًا بالاسم نفسه قبل مربع الاختيار.

كيف أحصل على قيمة مربع الاختيار في JavaScript؟

اقرأ box.checked، وهي true أو false. أما box.value فهي القيمة التي سيرسلها، وتبقى كما هي سواء كان المربع محددًا أم لا. استمع إلى حدث change لتستجيب عند تبديله.

كيف أغيّر لون مربع الاختيار؟

اضبط accent-color عليه: input[type=checkbox] { accent-color: #16a34a; }. ولمظهر مخصص بالكامل، اضبط appearance: none وارسم المربع وعلامة الصح بنفسك بـ CSS.

مفاهيم ذات صلة