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

How to uncheck a group of checkboxes when another checkbox is checked

本文关键字：复选框 一组 取消 另一个      更新时间：2023-09-26

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

下面是一个代码示例：

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

尽管有我的评论，我还是构建了一个小提琴：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"answers"for"属性来链接它们）。看看这个参考：http://www.w3schools.com/tags/tag_label.asp我前面的fiddle还提供了一个标准标记约定的示例。

这段代码也起到了作用。从ArraryKnigh的答案中找到正确的路径。你也可以检查小提琴：

$('.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);
 });
相关文章：