Question

我正在尝试通过复选框本身取消选中该分组列表中所有选中的复选框或单选按钮。

为了更好地理解，请看这个小提琴：http://jsfiddle.net/XWQcZ/47/

“重置”复选框会在选中后立即取消选中所有子项，反之亦然。

问题可能出在这一行，因为它没有得到合适的孩子：

 var group = $checkbox.parents('option-set').attr('data-group');

我得到了第一个不在列表中的复选框。但是，只要我将复选框放在列表中;

<ul><li></li></ul>

重置按钮不再工作..不知道为什么。因此单选按钮还没有正常工作。

一定要轻松退出，但如何正常工作呢？提前谢谢。

修改

改变了小提琴。添加了筛选的值以获得更好的概述。但是单选按钮还没有正常工作，因为它保留了未经检查的值。

Answer 1

首先，'option-set'是一个类，所以它必须被称为一个类。只需在开头加点，如：

var group = $checkbox.parents('.option-set').attr('data-group');

但主要问题在于这一行：

$checkbox.siblings( selector ).removeAttr('checked');

当你把它们放在ul li标签之间时，你的复选框的兄弟会改变。所以这一行应该是：

$(".option-set[data-group='"+group+"'] "+selector).not($checkbox).removeAttr('checked');

“not（$ checkbox）”过滤器从列表中排除当前项目本身。我认为这足以让你的代码工作。

Answer 2

为每个列表指定一个唯一的ID，但也为它们提供所有相同的类

<ul id="group1" class="resettable">
    <li><input type="checkbox" ... ></li>
...
</ul>

<ul id="group2" class="resetable">
    <li><input type="checkbox" ... </li>
</ul>

将“所有”复选框设为唯一ID：

<input type="checkbox" id="reset" ...>    
<input type="checkbox" id="brand1" ...>

在您的jQuery中，您需要为“所有”复选框的click事件添加一个处理程序。

$('#reset').click(function(){
    // will uncheck all checkboxes in a <ul class="resetable">
    $('.resetable').children().prop('checked', false);

});



$('#brand1').click(function(){
//will select all check boxes in your <ul id="group1">
    $('#group1').children(':checkbox').prop('checked', true);

});

取消选中列表中的所有分组复选框或单选按钮

2 个答案: