Question

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

我已经创建了大量正确的示例，但没有一个在演示中有多个过滤器，现在它表现得很奇怪。

当我点击（全部）过滤器1时，它正常工作，但不是（全部）过滤器2 ......

的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更改为class并使用下面的代码。

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

你总是在第一个复选框上检查道具。实际上你只需要检查点击复选框的属性。

Answer 2

id Attribute指定元素的唯一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);
    })
})

OR改变如下：

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

最终代码：

＆＃13;

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

＆＃13;

Jquery取消选中所有Checkbox Multiple Forms

2 个答案: