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

Question

我正在尝试为用户构建过滤器，包括 select/unselect 所有功能。

我找到了很多正确的例子，但是 none 其中的例子在演示中有不止一个过滤器，现在它表现得很奇怪。

当我点击 filter1 的（全部）时它工作正常但不是 filter2 的（全部）...

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"));
});

提前谢谢你，最大值

Answer 1

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

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

您总是勾选第一个复选框的道具。其实你只需要勾选属性 of clicked checkbox.

Answer 2

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

<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>

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

Jquery Unselect all Checkbox Multiple Forms

forms

checkbox

jquery

selectall