اذهب إلى المحتوى
  • 0

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

Lugain Amer

السؤال

Recommended Posts

  • 0

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

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 سوف يتم طباعة رسالة تنبيه.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

 

<!-- 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();
  }
})

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

أولاً كود 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>

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

تم التعديل في بواسطة محمد ربيع زليول
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...