جافا سكريبت التعامل مع checkbox

يمكنك كتابة هذا الكود بطريقة سهلة

Gaza <input type="checkbox" id="city" name="city" value="Gaza">
Jablia <input type="checkbox" id="city" name="city" value="Jablia">
Rafah <input type="checkbox" id="city" name="city" value="Rafah">
Deer Elblah <input type="checkbox" id="city" name="city" value="Deer Elblah">
Khanyounse <input type="checkbox" id="city" name="city" value="Khanyounse">
Nosyrat <input type="checkbox" id="city" name="city" value="Nosyrat">

<script>
     var IDArray = [];
    $("input:checkbox[name=city]:checked").each(function () {
        IDArray.push($(this).val());
    });
    if (IDArray.length == 3) {
        alert("You Selected 3 Cities");
      return false;
    }
</script>

الفكرة هنا, هي إنشاء مصفوفة فارغة من أي عنصر, ثم إضافة كل عنصر يتم تحديده إليها, وبعد ذلك معرفة عدد العناصر, في حال كان العدد يساوي 3 سوف يتم طباعة رسالة تنبيه.

هذه أسهل طريقة للقيام بالمطلوب :

<!-- HTML -->

<ul>
<li>Tripoli <input type="checkbox" name="city" value="Gaza"></li>
<li>Musrata <input type="checkbox" name="city" value="Jablia"></li>
<li>Zawia <input type="checkbox" name="city" value="Rafah"></li>
<li>Zlitn <input type="checkbox" name="city" value="Deer Elblah"></li>
<li>Jfara <input type="checkbox" name="city" value="Khanyounse"></li>
</ul>

// أولا نقوم بإضافة مستمع لحدث نقرة الفأرة لحقول التشيك بوكس 

$("input:checkbox[name=city]").click(function(e) {

  //عند الضغط على أحد حقول تشيك بوكس نقوم بإسترجاع عدد حقول التشيك بوكس التي تم إختيارها 
  // إذا كان عددهم أكثر من 3 نقوم بإظهار رسالة و إلغاء عملية الضغط
  
  if($("input:checkbox[name=city]:checked").length > 3) { 
    alert("لا يمكنك إختيار أكثر من ثلاثة");
    e.preventDefault();
  }
})

هذا رابط للكود لايف بإمكانك رؤية النتيجة النهائية عليه.

أولاً كود HTML:

هنا لدينا قائمة بأسماء المدن، لكل عنصر من عناصر القائمة إسم وقيمة.

<!-- قائمة المدن -->
<div>
      <div>
        <input type="checkbox" id="algiers" name="city" value="Algiers" />
        <label for="algiers">Algiers</label>
      </div>

      <div>
        <input type="checkbox" id="cairo" name="city" value="Cairo" />
        <label for="cairo">Cairo</label>
      </div>

      <div>
        <input type="checkbox" id="djibouti" name="city" value="Djibouti" />
        <label for="djibouti">Djibouti</label>
      </div>

      <div>
        <input type="checkbox" id="rabat" name="city" value="Rabat" />
        <label for="rabat">Rabat</label>
      </div>


      <div>
        <input type="checkbox" id="tunis" name="city" value="Tunis" />
        <label for="tunis">Tunis</label>
      </div>

    </div>

وفي جانب الجافاسكربت:

1. قمنا بعمل قائمة بالمدن المختارة من طرف المستخدم.
2. أضفنا مستمع حدث (EventListener) لكل checkbox.
3. نقرأ قيمة checkbox الذي تم الضغط عليه ونضعه في متغير "إسم المدينة".
4. في حالة كانت المدينة التي ضغط عليها المستخدم موجودة مسبقا بالقائمة نقوم بحذفها.
5. في حالة كان عدد المدن بقائمة المدن المختارة يساوي 3 نقوم بإلغاء الحدث.
6. أما في حالة كانت المدينة غير متواجد بالقائمة وكانت القائمة تحتوي على أقل من 3 عناصر نقوم بإضافة المدينة إلى القائمة.

<script>
  	  // متغير للإحتفاظ بالمدن المختارة
      const selectedCities = [];
      // قائمة بجميع checkboxs
      const checkboxs = document.querySelectorAll("input[name=city]");

      for (const checkbox of checkboxs) {
        // نضيف مستمع حدث لكل checkbox
        checkbox.addEventListener("click", (e) => {
          // متغير للإحتفاظ بإسم المدينة
          const cityName = checkbox.getAttribute("value");
		  // في حالة تواجد العنصر في قائمة المدن المختارة نقوم بحذفه
          if (selectedCities.indexOf(cityName) !== -1) {
            selectedCities.splice(selectedCities.indexOf(cityName), 1);
            return;
          }

          // في حالة تواجد أكثر من 3 مدن بالقائمة نقوم بإلغاء الأكشن
          if (selectedCities.length === 3) {
            e.preventDefault();
            return;
          }

          // في حالة كانت العنصر غير متواجد بالقائمة وكانت القائمة تحتوي على أقل من 3 عناصر نضيف العنصر إلى القائمة
          selectedCities.push(cityName);
        });
      }
    </script>

لتجربة الكود إضغط هنا.