Question

我正在尝试通过选择selectAll来执行组复选框。请检查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

Answer 1

你可能想要的是这个。

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

Fiddle

Answer 2

您的功能存在一些问题：尝试这种方式：

的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方法，那么：

在checkall复选框中添加一个类

 <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

Answer 3

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

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

并将其传递给你的onclick

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

JSFiddle中的组复选框：第1部分

3 个答案:

的js

标记