Jquery取消选中所有复选框多个表单

我正在尝试为用户构建过滤器，包括选择/取消选择所有功能。Jquery取消选中所有复选框多个表单

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

当我点击（全部）的过滤器1 IT'IS工作正常，但不是（全部）的过滤器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")); 
});

预先感谢您，最大

来源

2016-08-17 Max06270

您应该使用一个类'选择-all'而不是ID。 ID的应该是唯一的一个元素。编辑：同样适用于您的输入ID;那些应该也是类。 –

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

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

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

来源

2016-08-18 00:22:31

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

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>

来源

2016-08-18 00:25:56 Ehsan

感谢您的帮助，此解决方案正在开发中。不过，我将使用由Vijendra Kulhade提供的一个。 – Max06270

不用客气 – Ehsan

Jquery取消选中所有复选框多个表单

回答

相关问题