Question

昨天我正在回答How to check/uncheck all checkboxes based on the selection of one checkbox和我想出这个解决方案的stackoverflow问题之一。但问题是它只能工作一次，但是如果你点击它两次就行不通。 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" />中所示，更改属性不会更改属性，即基本上你想要的，因为更改属性只会工作一次，因为下次检查属性时它会返回属性的反面。

有关prop和attr之间区别的概述，请参阅此SO question。

$('#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

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

1 个答案: