انقر فوق تبديل مع jQuery

Question

لقد استخدمت وظيفة تحوم حيث تقوم ب X على Mouseover و Y و Mouseout. أحاول نفس النقر ولكن لا يبدو أنه يعمل:

$('.offer').click(function(){ 
  $(this).find(':checkbox').attr('checked', true ); 
},function(){
  $(this).find(':checkbox').attr('checked', false ); 
});

أريد التحقق من مربع الاختيار عند النقر على div, ، وعدم التحقق من النقر مرة أخرى - انقر فوق "تبديل".

Answer 1

يتم القيام بذلك بسهولة عن طريق التقليب حالة "فحص" الحالية من مربع الاختيار عند كل نقرة. أمثلة:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 });

أو:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.is(':checked'));
 });

أو عن طريق التلاعب مباشرة بممتلكات DOM "فحص" (أي عدم استخدام attr() ل أحضر الحالة الحالية لصندوق الاختيار النقر):

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox[0].checked);
 });

...وهلم جرا.

ملاحظة: منذ jQuery 1.6، يجب تعيين مربعات الاختيار باستخدام prop ليس attr:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });

Answer 2

سيكون نهج آخر هو jquery الموسعة مثل هذا:

$.fn.toggleCheckbox = function() {
    this.attr('checked', !this.attr('checked'));
}

ثم اتصل:

$('.offer').find(':checkbox').toggleCheckbox();

Answer 3

تحذير: استخدام. ATM () أو دعم() لتغيير حالة مربع الاختيار لا حريق تغيير الحدث في معظم المتصفحات التي اختبرتها معها. ستتغير الحالة المحددة ولكن لا يوجد فقاعة حدث. يجب عليك تشغيل حدث التغيير يدويا بعد تعيين السمة المحددة. كان لدي بعض معالجات الأحداث الأخرى المراقبة حالة خانات الاختيار وستعمل بشكل جيد مع نقرات المستخدم المباشرة. ومع ذلك، فشل تعيين الحالة المحددة برمجيا إلى إفادة حدث التغيير باستمرار.

jQuery 1.6.

$('.offer').bind('click', function(){ 
    var $checkbox = $(this).find(':checkbox');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
});

Answer 4

يمكنك استخدام toggle وظيفة:

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});

Answer 5

لماذا لا في سطر واحد؟

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});

Answer 6

لدي مربع اختيار واحد اسمه chkDueDate وكائن HTML مع حدث Click كما يلي:

$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));

النقر فوق كائن HTML (في هذه الحالة <span>) تبديل الخاصية فحص مربع الاختيار.

Answer 7

مسج: أفضل طريقة، تفويض الإجراءات إلى مسج (jQuery = jquery).

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});

Answer 8

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

$(this).find(':checkbox').attr('checked', true ); 

الى هذا:

$(this).find(':checkbox').attr('checked', 'checked'); 

ليس بالتأكيد 100٪ إذا كان ذلك سيفعل ذلك، لكن يبدو لي أن أذكر مشكلة مماثلة. حظا طيبا وفقك الله!

Answer 9

$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});

Answer 10

في jQuery، لا أعتقد أن النقر () يقبل وظيفتين للتبديل. يجب عليك استخدام وظيفة Toggle () لهذا: http://docs.jquery.com/events/toggle.

Answer 11

$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});

Answer 12

أسهل الحل

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});

Answer 13

<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>

Answer 14

حل بديل آخر لتبديل قيمة مربع الاختيار:

<div id="parent">
    <img src="" class="avatar" />
    <input type="checkbox" name="" />
</div>


$("img.avatar").click(function(){

    var op = !$(this).parent().find(':checkbox').attr('checked');
    $(this).parent().find(':checkbox').attr('checked', op);

});

Answer 15

    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});