كيفية تعيين "checked" لمربع الاختيار باستخدام jQuery: شرح مفصل للمبتدئين

لماذا يصاب مربع الاختيار بالجنون؟ قصة خطأ برمجي واحد

تخيل: أنت تكتب نموذج تسجيل على موقع. هناك مربع اختيار "أوافق على الشروط". المستخدم ينقر - توضع العلامة. كل شيء يعمل. ثم تقرر إضافة زر "تحديد الكل" باستخدام jQuery. تكتب $('#agree').attr('checked', true) - ولا يحدث شيء. أو توضع العلامة مرة واحدة، ثم تتوقف عن الإزالة. هل هذا مألوف؟

هذا السؤال هو واحد من أكثر الأسئلة شيوعًا على Stack Overflow. آلاف المطورين يتعثرون بنفس المشكلة. واليوم سنفهم لماذا يحدث ذلك، وكيفية تعيين checked لمربع الاختيار باستخدام jQuery بشكل صحيح.

باختصار: ما هي المشكلة؟

المشكلة هي أن العديد من المبتدئين (وليس فقط) يستخدمون طريقة .attr() للتحكم في السمة checked. ولكن منذ jQuery 1.6، الطريقة الصحيحة هي استخدام .prop(). الفرق بين السمة (attribute) والخاصية (property) هو موضوع رئيسي سنشرحه الآن.

السمة مقابل الخاصية: ما الفرق؟

دعنا نشرح ببساطة. سمة HTML هي ما تكتبه في الترميز:

<input type="checkbox" id="agree" checked>

السمة checked هنا تحدد الحالة الأولية لمربع الاختيار. ولكن عندما ينقر المستخدم - تتغير الخاصية (property) لعنصر DOM، بينما تبقى السمة كما هي.

طريقة .attr() تعمل مع السمات، بينما .prop() تعمل مع الخصائص. وبما أننا نهتم بالحالة الحالية لمربع الاختيار (التي تتغير ديناميكيًا)، نحتاج إلى .prop().

كيف يبدو ذلك في الكود

هذا مثال بسيط يوضح الفرق:

<!-- HTML -->\n<input type="checkbox" id="myCheckbox">\n<button id="setChecked">تعيين العلامة</button>\n<button id="removeChecked">إزالة العلامة</button>\n\n<script>\n// الطريقة الصحيحة (jQuery 1.6+)\n$('#setChecked').click(function() {\n    $('#myCheckbox').prop('checked', true);\n});\n\n$('#removeChecked').click(function() {\n    $('#myCheckbox').prop('checked', false);\n});\n</script>

لاحظ: نمرر الوسيط الثاني true أو false - قيمة منطقية (boolean). هذا مهم.

الأخطاء النموذجية للمبتدئين (وكيفية تجنبها)

الخطأ 1: استخدام .attr() لتعيين checked

// ❌ غير صحيح\n$('#myCheckbox').attr('checked', true);\n\n// ❌ غير صحيح أيضًا\n$('#myCheckbox').attr('checked', 'checked');

لماذا هذا سيء؟ لأن .attr() يحدد السمة وليس الخاصية. بعد أول نقرة من المستخدم، قد تبقى السمة بينما تتغير الخاصية. والنتيجة - سلوك غير متسق.

الخطأ 2: تمرير سلسلة نصية بدلاً من قيمة منطقية

// ❌ غير صحيح\n$('#myCheckbox').prop('checked', 'true'); // سلسلة نصية، ليست قيمة منطقية

هل يحول jQuery السلسلة النصية إلى قيمة منطقية؟ في بعض الحالات - نعم. لكن الاعتماد على ذلك ممارسة سيئة. دائمًا مرر true أو false بدون علامات اقتباس.

الخطأ 3: نسيان استخدام .prop() عند قراءة الحالة

// ❌ غير صحيح\nif ($('#myCheckbox').attr('checked')) { ... }\n\n// ✅ صحيح\nif ($('#myCheckbox').prop('checked')) { ... }

لقراءة الحالة الحالية - فقط .prop().

مثال كامل: نموذج مع مربعات اختيار وأزرار تحكم

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

<!DOCTYPE html>\n<html>\n<head>\n    <title>التحكم في مربعات الاختيار باستخدام jQuery</title>\n    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>\n</head>\n<body>\n    <h3