javascript - jquery复选框被选中/取消选中一次，如果我再试一次它就不起作用

Question

请检查小提琴

这是代码：

$(document).ready(function(){
        $('#main_chk').click(function(){    

            if(this.checked)
            {
                $(".chks").attr('checked', true);
            }
            else
            {
                $(".chks").removeAttr('checked');                                           
            }

        })
})

它第一次工作（你必须点击第一个复选框）它会切换复选框，但如果你再试一次，它就不起作用

Answer 1

使用.change()and.prop()代替。

$(document).ready(function () {
    $('#main_chk').change(function () {
        if (this.checked) {
            $(".chks").prop('checked', true);
        } else {
            $(".chks").prop('checked', false);
        }
    });
});

此外，您可以将其简化如下。

$(document).ready(function () {
    $('#main_chk').change(function () {
        $(".chks").prop('checked', this.checked);
    })
})

在这里查看一个活生生的例子。

注意：属性id必须是唯一的，请修正您的 HTML 标记。

Answer 2

你可以试试这个：http: //jsfiddle.net/6bKyq/

 $(document).ready(function(){
    $('#main_chk').click(function(){    
        $(".chks").prop('checked', this.checked);
    });
 });

Answer 3

首先..您的 html 无效，因为您有多个具有相同名称的 id...ID 应该始终是唯一的.. 将您的所有 id 更改为 class..

其次你可以使用 prop();

 $('#main_chk').click(function(){   

    if(this.checked)
    {
      $(".chks").prop('checked', true);
    }
    else
    {
       $(".chks").prop('checked',false);                                            
    }


 })

Answer 4

您可以使用 ：

$('#main_chk').mousedown(function() {
 if (!$(this).is(':checked')) {
     $(this).trigger("change");
 }
});