点击主复选框时检查所有复选框

昨天我给出了一个解决问题的计算器问题How to check/uncheck all checkboxes based on the selection 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

那么，什么是错我的方法，工作正常？要么它不应该工作。如果它一次工作一次，为什么它不能两次？

来源

2013-07-24 Khawer Zeshan

的可能重复的[VS .attr .prop（）（）（ http://stackoverflow.com/questions/5874652/prop-vs-attr） – Barmar

注意，如果你想这个工作正常，你必须在.chk单击一个事件处理程序，因为目前如果你unch选中其中一个“从属”复选框，“主”复选框将保持选中状态，如果您手动检查所有“从属”复选框，则主复选框将保持未选中状态。 – nubinub

它只能使用一次的原因是因为您应该使用了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

来源

2013-07-24 13:20:06 adeneo

您编辑的答案对我更有意义。感谢您的解释。 –

点击主复选框时检查所有复选框

回答

相关问题