Jquery取消选择所有复选框多个表单答案

【问题标题】：Jquery Unselect all Checkbox Multiple FormsJquery取消选择所有复选框多个表单
【发布时间】：2016-08-17 23:30:24
【问题描述】：

我正在尝试为用户构建过滤器，包括选择/取消选择所有功能。

我已经建立了很多正确的例子，但没有一个在演示中拥有超过一个过滤器，现在它的行为很奇怪。

当我点击 filter1 的 (All) 时，它工作正常，但不是 filter2 的 (All)...

JSFIDDLE：

https://jsfiddle.net/Max06270/pvtqpn8a/#&togetherjs=2tvV3Mhb7l

HTML：

<div id="filter1">
  <form action='#'>
    <input type="checkbox" id="select-all" checked>(All)<br>
    <!-- Should select/unselect only the F1 checkboxes -->
    <input type="checkbox" id="checkbox-f1" checked>F1: Value1<br>
    <input type="checkbox" id="checkbox-f1" checked>F1: Value2<br>
    <input type="checkbox" id="checkbox-f1" checked>F1: Value3<br>
    <input type="checkbox" id="checkbox-f1" checked>F1: Value4<br>
    <input type="submit" id="submit-f1" value="Apply">
  </form> 
</div>          
<br>
<div id="filter2">
  <form action='#'>
    <input type="checkbox" id="select-all" checked>(All)<br>
    <!-- Should select/unselect only the F2 checkboxes -->
    <input type="checkbox" id="checkbox-f2" checked>F2: Value1<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value2<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value3<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value4<br>
    <input type="submit" id="submit-f2" value="Apply">
  </form> 
</div>

JS：

$("#select-all").change(function () {
    $(this).siblings().prop('checked', $(':checkbox').prop("checked"));
});

提前谢谢你，最大

【问题讨论】：

您应该使用 select-all 的类而不是 ID。 ID 应该对一个元素是唯一的。编辑：您的输入 ID 也是如此；那些也应该是类。

标签： jquery forms checkbox selectall

【解决方案1】：

您不应该保留相同的 id。对于两个（全部）复选框。将 id 更改为 class 并使用以下代码。

$(".select-all").change(function () {
    $(this).siblings().prop('checked', $(this).prop("checked"));
});

你总是检查第一个复选框的道具。其实你只需要检查 clicked checkbox 的属性。

【讨论】：

非常感谢。这是完美的答案

【解决方案2】：

id 属性为一个元素指定一个唯一的 id，所以你必须使用这样的类：

<div id="filter1">
    <form action='#'>
        <input type="checkbox" class="select-all" checked>(All)<br>
        //....
    </form> 
</div>

还有

<div id="filter2">
  <form action='#'>
    <input type="checkbox" class="select-all" checked>(All)<br>
    //...
  </form> 
</div>

并像这样更改 jquery 代码：

$(document).ready(function() {
    $("#filter2 .select-all, #filter1 .select-all").change(function() {
        if($(this).is(':checked'))
            $(this).siblings().prop('checked',true);
        else
            $(this).siblings().prop('checked',false);
    })
})

或者像这样改变：

$(document).ready(function() {
    $(".select-all").change(function () {
        $(this).siblings().prop('checked', $(this).prop("checked"));
    })
})

最终代码：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
<div id="filter1">
    <form action='#'>
        <input type="checkbox" class="select-all" checked>(All)<br>
        <!-- Should select/unselect only the F1 checkboxes -->
        <input type="checkbox" id="checkbox-f1" checked>F1: Value1<br>
        <input type="checkbox" id="checkbox-f1" checked>F1: Value2<br>
        <input type="checkbox" id="checkbox-f1" checked>F1: Value3<br>
        <input type="checkbox" id="checkbox-f1" checked>F1: Value4<br>
        <input type="submit" id="submit-f1" value="Apply">
    </form> 
</div>
<br>
<div id="filter2">
  <form action='#'>
    <input type="checkbox" class="select-all" checked>(All)<br>
    <!-- Should select/unselect only the F2 checkboxes -->
    <input type="checkbox" id="checkbox-f2" checked>F2: Value1<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value2<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value3<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value4<br>
    <input type="submit" id="submit-f2" value="Apply">
  </form> 
</div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
$(document).ready(function() {
    $("#filter1 .select-all, #filter2 .select-all").change(function() {
        if($(this).is(':checked'))
            $(this).siblings().prop('checked',true);
        else
            $(this).siblings().prop('checked',false);
    })
    })
        </script>
    </body>
</html>

【讨论】：

感谢您的帮助，此解决方案有效。但是我将使用 Vijendra Kulhade 提供的一个。