如果選中另一個復選框，如何取消選中一組復選框

Question

我在我正在開發的網站上創建了一個搜索功能，但我仍然堅持這一部分。 搜索功能有一個類別列表，用戶可以檢查或取消選中這些類別以過濾項目。 這些選項幾乎與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>

Answer 1

盡管我的評論，我還是建立了一個小提琴： 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我以前的小提琴也提供了標准標記約定的一個例子。

Answer 2

這段代碼也在做伎倆。從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);
 });