选中另一个复选框时如何取消选中一组复选框

Posted 2023-03-05

【中文标题】选中另一个复选框时如何取消选中一组复选框

【英文标题】：How to uncheck a group of checkboxes when another checkbox is checked

【发布时间】：2013-08-15 13:41:47

【问题描述】：

我在我正在开发的网站上创建了一个搜索功能，但我被困在这部分。搜索功能有一个类别列表，用户可以选中或取消选中这些类别以过滤项目。这些选项几乎与Coursera 实现其搜索功能的方式相同。我希望在选中 All Categories 选项时取消选中所有其他复选框，并在未选中其他任何内容时取消选中 All Categories 复选框。这听起来有点令人困惑，但这正是该网站所实施的。

下面是代码示例：

<div class="filter-grade">
    <label class="checkbox">
        <input type="checkbox" id="grade-all" name="grade[]" value="0" checked><b>All Grades</b>
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-9" name="grade[]" value="9">Grade 9
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-10" name="grade[]" value="10">Grade 10
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-11" name="grade[]" value="11">Grade 11
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-12" name="grade[]" value="12">Grade 12
    </label>
</div>

【问题讨论】：

查看他们的 js 文件并弄清楚他们是如何做到的。你有一个有效的例子。

@ArrayKnight 我试过了，但是他们的 js 文件都被最小化了，我尝试浏览每个并搜索“check”和“checked”以及其他关键字，但没有出现：/

对缩小的 js 使用 js 美化器。试试这个link 了解更多信息。并且调试器还提供了 js 美化器。试试这个answer 获取 chrome 调试工具参考。

【参考方案1】：

此代码也可以解决问题。从 ArraryKnigh 的 answer 获得正确的路径。也可以查看fiddle：

$('.group :checkbox').filter("[class!='group-all']").on('change', function() 
     var parentDiv=$(this).parent();
    $('.group-all',parentDiv ).attr('checked',false);
 );

$('.group :checkbox').filter("[class='group-all']").on('change', function() 
    var parentDiv=$(this).parent();
    $('input',parentDiv ).attr('checked',false);
    $(this).attr('checked',true);
 );

【讨论】：

我对你的回答和@ArrayKnight 有同样的问题。我的结构与您的不同，我认为即使更改路径也会导致错误：/

在 js fiddle 中分享你的方法。如果不看，很难假设那里发生了什么

@NartBarileva ，用你的 html 结构更新了我的小提琴。立即尝试，它对我有用

【参考方案2】：

尽管我发表了评论，但我还是做了一个小提琴：http://jsfiddle.net/ctnCn/5/

$('.group input').on('change', function() 
    var $inputs = $(this).siblings('input').add(this),
        $checked = $inputs.filter(':checked'),
        $all = $inputs.eq(0),
        index = $inputs.index(this);

    (index === 0 ? $checked : $all).removeAttr('checked');

    if(index === 0 || $checked.length === 0) 
        $all.attr('checked', 'checked');
    
);

具体项目更新：http://jsfiddle.net/ctnCn/6/

$('.filter-grade input').on('change', function() 
    var $inputs = $(this).closest('div').find('input'),

虽然我想指出这不是标签元素的标准用法。我建议将您的标记更改为具有标签和输入是兄弟姐妹（并使用“id”和“for”属性来链接它们）。看看这个参考：http://www.w3schools.com/tags/tag_label.asp我之前的小提琴也提供了一个标准标记约定的例子。

【讨论】：

+1 非常好。我会使用 .prop() 而不是 attr.

原来使用 .prop() 和 .removeProp() 会引入一个错误，而 .attr() 和 .removeAttr() 则不会。如果您单击“苹果”，单击“所有水果”，然后再次单击“所有水果”，它将取消选中，尽管被告知要检查。

哦，我以为我看到了一些比较。你是对的，不需要在那里使用 .prop() 。

您好，感谢您的帮助。我试过了，但有些东西不起作用，我不确定它是否与我的复选框的结构有关。我有一个“过滤主题”div，里面有标签，每个标签里面都有复选框输入。如果您能帮助我，那就太好了！

我需要你的 html 样本才能调整小提琴以适应你的项目。