كيفية التحقق مما إذا كانت خانة الاختيار محددة في jQuery: دليل كامل مع أمثلة

كيفية التحقق مما إذا كانت خانة الاختيار محددة في jQuery: برنامج تعليمي خطوة بخطوة للمبتدئين

مرحباً يا صديقي! إذا كنت قد عملت يوماً مع النماذج على صفحة ويب، فبالتأكيد واجهت مهمة: "هل هذه الخانة محددة؟". قد تبدو شيئاً بسيطاً، لكن هذه التفاصيل الصغيرة غالباً ما تحير حتى المطورين ذوي الخبرة. على Stack Overflow، جمع سؤال "How do I check whether a checkbox is checked in jQuery?" آلاف المشاهدات، وهذا يعني أن الموضوع ساخن حقاً.

في هذا البرنامج التعليمي، لن أعرض فقط الصيغة الجافة. سنناقش عدة طرق، ونقارنها، ونكتشف أين تكمن المخاطر، ونكتب كوداً جميلاً وعملياً. هيا بنا!

لماذا هذا مهم؟ (وما علاقة jQuery بالأمر؟)

اليوم، ينتقل الكثيرون إلى JavaScript الخالص، لكن jQuery لا يزال حياً في ملايين المشاريع: من المواقع القديمة إلى لوحات التحكم الحديثة. معرفة كيفية العمل مع :checked وطرق .prop() / .attr() هي أساسية ستوفر لك ساعات من التصحيح.

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

الطريقة رقم 1: الكلاسيكية - طريقة .prop()

الطريقة الحديثة والصحيحة. منذ jQuery 1.6، للسمات المنطقية (checked, disabled, selected) يجب استخدام .prop().

// HTML\n<input type="checkbox" id="agree"> أوافق على الشروط\n\n// jQuery\nif ($('#agree').prop('checked')) {\n    console.log('خانة الاختيار محددة!');\n} else {\n    console.log('خانة الاختيار غير محددة.');\n}

لماذا يعمل هذا؟ .prop() يصل إلى خاصية عنصر DOM، والتي تعيد دائماً true أو false. هذا سريع وموثوق وبدون مفاجآت.

الطريقة رقم 2: المحدد :checked (موجز)

هل تريد أقصر؟ استخدم المحدد الزائف :checked. يتحقق مما إذا كان العنصر محدداً مباشرة في المحدد.

if ($('#agree:checked').length) {\n    console.log('محدد!');\n} else {\n    console.log('غير محدد.');\n}

أو بشكل أكثر أناقة:

if ($('#agree').is(':checked')) {\n    console.log('محدد!');\n}

طريقة .is() تعيد true إذا كان عنصر واحد على الأقل من المجموعة يطابق المحدد. جميل وسهل القراءة.

الطريقة رقم 3: .attr() القديم - احذر، فخ!

أحياناً في البرامج التعليمية القديمة ستجد هذا الكود:

// مثال سيء\nif ($('#agree').attr('checked')) {\n    console.log('محدد');\n}

لا تفعل هذا! .attr() يقرأ سمة HTML التي لا تتغير بعد نقر المستخدم. ستعيد undefined أو السلسلة "checked" فقط إذا كانت السمة مكتوبة في HTML أصلاً. لا يتتبع الحالة الديناميكية. هل تريد التقاط خطأ؟

مثال حي: نموذج مع عدة خانات اختيار

لنجمع كل شيء معاً. تخيل أن لدينا قائمة هوايات، ونريد معرفة أيها اختارها المستخدم.

<h3>اختر هواياتك:</h3>\n<label><input type="checkbox" class="hobby" value="coding"> برمجة</label>\n<label><input type="checkbox" class="hobby" value="gaming"> ألعاب</label>\n<label><input type="checkbox" class="hobby" value="reading"> قراءة</label>\n<button id="showHobbies">عرض المحدد</button>\n\n<script>\n$('#showHobbies').on('click', function() {\n    let selected = [];\n    $('.hobby:checked').each(function() {\n        selected.push($(this).val());\n    });\n    if (selected.length) {\n        alert('لقد اخترت: ' + selected.join(', '));\n    } else {\n        alert('لم يتم اختيار شيء.');\n    }\n});\n</script>

لاحظ: نستخدم .hobby:checked - هذا محدد يختار على الفور فقط