تغيير العنصر الأصلي لمربع الاختيار في حالة تحديده أو إلغاء تحديده

Question

في الأساس لدي مربع اختيار داخل عنصر td وأريد أن يكون له لون خلفية واحد عند تحديد خانة الاختيار ولون خلفية آخر عند إلغاء تحديد خانة الاختيار.وبعبارة أخرى، أريده أن يسلط الضوء على ما إذا كان قد تم تحديده أم لا.

حاولت استخدام نفس الحل كما في هنا: حدث تبديل Jquery يعبث بقيمة مربع الاختيار

لكن لسبب ما لا أستطيع تشغيله.

    $(document).ready(function(){
    $("input:checkbox").change(function() {
        if($(this).attr("checked") === "true") {
            // CHECKED, TO WHITE
            $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"});
            return;
        }
        //NOT CHECKED, TO GREEN
        $(this).parent().css({"background" : "#b4e3ac", "-moz-border-radius" : "5px"});
    });
});

إنه يضيف لون الخلفية الخضراء ولكنه لا يزيله.وإذا تركت مربع اختيار محددًا، قم بالتحديث، ويعود td إلى اللون الأبيض وبمجرد النقر فوق مربع الاختيار مرة أخرى، وإلغاء تحديده، فإنه يغير خلفية td إلى اللون الأخضر.

ما زلت جديدًا على هذا الأمر، وليس لدي أي فكرة عما يمكن أن يكون الخطأ هنا، وأحاول اكتشافه منذ ساعات الآن.مثل هذا الشيء البسيط ولكن لا يمكن تشغيله.

Answer 1

يتغير

if($(this).attr("checked") === "true")

ل

if($(this).attr("checked") === true)

نظرًا لأنك تقارن باستخدام المساواة الصارمة، يجب أن يكون نوعا البيانات متماثلين.

typeof ( $(this).attr ( "checked" ) )

سوف تتيح لك معرفة أنه من منطقية اكتب وأنت تقارنه بسلسلة.

لمزيد من المعلومات انظر عوامل المقارنة

Answer 2

وهناك طريقة أفضل لمعرفة ما إذا تم تحديد خانة الاختيار:

$(this).is(':checked')

ومن أكثر قليلا قوية.

Answer 3

<اقتباس فقرة>   

وإذا ($ (هذا) .attr ( "فحص") === "صحيح")

وattr لا يقرأ سمات HTML. انها خادعة بهذه الطريقة. إذا لم تقرأ الصفات، وسوف checked قيمة السلسلة 'checked' وليس 'true'. لكنها لا تفعل ذلك.

وماذا تفعل في الواقع قراءة خصائص الكائن جافا سكريبت، فقط باستخدام أسماء السمة بدلا من أسماء الملكية في عدد قليل من الأماكن التي تختلف. الخاصية checked يعطيك قيمة منطقية لذلك ليس هناك حاجة لمقارنتها بأي شيء، يمكنك أن تقول فقط:

if ($(this).attr('checked'))

وأو حتى أبسط، أي ما يعادل تماما:

if (this.checked)

Answer 4

وأفضل واحد هو

if($("this").is(':checked'))
 {
   $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"})
 }

Answer 5

وتحقق من هذا المقالة على الفرق بين =، == و== = في جافا سكريبت. أو هذا على مشغلي المساواة في شبيبة.

Answer 6

وحاول تغيير هذا:

$(this).attr("checked") === "true"

وعلى هذا:

!!$(this).attr("checked") === true

وهذا سيتم تحويل أي غير منطقية لمنطقي والسماح نوع الخاصة بك مقارنة آمنة للعمل حتى لو يتم إرجاع السلسلة "الحقيقية" (إذا تم إرجاع سلسلة كاذبة فإنه سيتم تقييم إلى true على الرغم من ....)