jquery - 单击主复选框时选中所有复选框

Question

昨天，我回答了一个 stackoverflow 问题:How to check/uncheck all checkboxes based on the choice of one checkbox，我想出了这个解决方案。但问题是它只能运行一次，但点击两次就不起作用了。 FIDDLE

$('#allcb').click(function(){
    if ($('#allcb').is(':checked'))
    {
      $('.chk').each(function(){
        $(this).attr('checked', true);
      });
    }
    else
    {
        $('.chk').each(function(){
           $(this).attr('checked', false);
        });
    }
});

我发现这段代码可以按照要求正常工作 FIDDLE

那么我的方法有什么问题呢？要么它根本不应该工作。如果它可以工作一次，为什么它不能工作两次？

Answer 1

它只能工作一次的原因是因为你应该使用prop() ，不是attr() 。

prop()更改属性，如element.checked ，而attr()更改属性，如<input type="radio" checked="checked" /> ，并且更改属性不会更改属性，这本质上就是您想要的，因为更改属性只会起作用一次，因为下次检查属性时它会返回与属性相反的结果。

查看此SO question概述 prop 和 attr 之间的区别。

$('#allcb').click(function(){
    if ($('#allcb').is(':checked'))
    {
      $('.chk').each(function(){
        $(this).prop('checked', true);
      });
    }
    else
    {
        $('.chk').each(function(){
           $(this).prop('checked', false);
        });
    }
});

FIDDLE

作为旁注，该代码可以总结为:

$('#allcb').on('click', function(){
    $('.chk').prop('checked', this.checked);
});

FIDDLE