JSFiddle 中的分组复选框：第 2 部分 [关闭]答案

【问题标题】：Group checkboxes in JSFiddle: Part2 [closed]JSFiddle 中的分组复选框：第 2 部分 [关闭]
【发布时间】：2013-07-09 12:50:55
【问题描述】：

Group checkboxes in JSFiddle : Part 1

在解决第 1 部分的 Global Checkbox for All Check/Uncheck 之后。我还有其他几个问题要解决。

如果我取消选中列表中的任何项目。应取消选中自动全局（全选）。

如果我单独检查所有项目。应选中 Automatically Global (Check all)。像这样。

代码

 <fieldset>
    <!-- these will be affected by check all -->
    <div><input type="checkbox" ID="checkall1"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
    <!-- these won't be affected by check all; different field set -->
    <div><input type="checkbox" ID="checkall2"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>

   $('[id^=checkall]').click(function(){
    $(this).closest('fieldset').find('input').not(this).prop('checked',this.checked);
});

JSFiddle

【问题讨论】：

标签： javascript jquery jsfiddle

【解决方案1】：

注册一个回调，它将检查当前组中的所有复选框是否都被选中

$('input[id^=checkall]').click(function(){
    $(this).closest('fieldset').find('input').not(this).prop('checked',this.checked);
});

$(':checkbox').not('[id^=checkall]').click(function(){
    var all = $(this).closest('fieldset').find('[id^=checkall]');
    var chks = $(this).closest('fieldset').find('input').not(all);

    all.prop('checked', chks.length == chks.filter(':checked').length);
})

演示：Fiddle

【讨论】：