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

【问题标题】：Group checkboxes in JSFiddle : Part 1 [closed]JSFiddle 中的分组复选框：第 1 部分 [关闭]
【发布时间】：2023-04-02 17:05:01
【问题描述】：

我正在尝试通过选择全选来组合复选框。代码示例请查看 JSFiddle

JSFiddle

  <fieldset>
    <!-- these will be affected by check all -->
    <div><input type="checkbox" ID="checkall1" onclick="CheckAllClick('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" onclick="CheckAllClick('checkall2');"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>


   function CheckAllClick(id){
    alert(id);
     $(id).closest('fieldset').find(':checkbox').prop('checked', this.checked);

}

Part 2: Continue

【问题讨论】：

如果您已经解决了这个问题，请删除问题或发布您自己的解决方案作为答案，如果您认为它会对其他人有所帮助。
@Bergi 还有其他与此相关的系列问题。我知道我允许对一篇文章提出一个问题。就这样我打开了第 2 部分

标签： javascript jquery jsfiddle

【解决方案1】：

你的函数有一些问题：试试这个方法：

Js

   function CheckAllClick(elem) {
       $(elem).closest('fieldset').find(':checkbox').prop('checked', elem.checked);
   }

标记

 <input type="checkbox" ID="checkall1" onclick="CheckAllClick(this);">Check all</div>

Fiddle

将 onclick 函数中的元素作为this 传递并在您的代码中访问它。

如果你可以使用 jquery 方法，那么：

将类添加到选中复选框

 <input type="checkbox" class="checkAll" ID="checkall1" >Check all

使用相同的代码，如果您想让标签单击以选中复选框，那么只需将它们包装在label 标签中，您可以通过将所有复选框包装在标签中来执行相同的操作，这通常是一种标准方式：

 <label><input type="checkbox" class="checkAll" ID="checkall1" >Check all<label>

将事件处理程序绑定到类

$('.checkAll').on('change', function(){
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
})

Fiddle

【讨论】：

【解决方案2】：

function CheckAllClick(id){
    alert(id);
    $(id).closest('fieldset').find(':checkbox').prop('checked', 'checked');
}

最简单的解决方案是将已选中的属性更改为已选中，因为您只选择了您想要的输入

并将其传递给您的 onclick

<div><input type="checkbox" ID="checkall2" onclick="CheckAllClick(this);"> Check all</div>

【讨论】：

【解决方案3】：

你可能想要的是这个。

$('[id^=checkall]').click(function(){
    $(this).closest('fieldset').find(':checkbox').not(this).prop('checked', function(i,oldval){
       return !oldval; 
    });
});

Fiddle

【讨论】：

如果您选中一个然后选择全局一个，这个 !oldVal 将不起作用。 jsfiddle.net/ItsMeSri/Qe9GY/3
@James123 请改用return true;。
如果其中一项未选中然后全局（checkall）也未选中，该怎么办？