javascript - 如果取消选择一个输入，如何取消选择 "all"选择器

Question

我有一个搜索过滤器，如果选中，它将打开所有过滤器。我的问题是，如果您取消选择所有或其中一个过滤器，则全部按钮仍会保持打开状态。如果取消选择过滤器或所有过滤器，我该如何做到这一点，所有按钮将自动取消选择。

    function togglecheckboxes(master,group){
        var cbarray = document.getElementsByClassName(group);
        for(var i = 0; i < cbarray.length; i++){
            var cb = document.getElementById(cbarray[i].id);
            cb.checked = master.checked;
        }
    }

#search_attributes {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding-top: 5.5em;
  padding-left: 1em; 
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    background: none;
    height: 50px;
    width: 72px;
    display:inline-block;
    cursor: pointer;
    padding: 0 0 0 0px;
    filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
   
input[type=checkbox]:checked + label {
    background: none;
    height: 50px;
    width: 72px;
    display:inline-block;
    cursor: pointer;
    padding: 0 0 0 0px;
    filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
}

<div id="search_attributes">
            <section>
                <input type="checkbox" id="cb1_1" class="cbgroup1" name="cbg1[]" value="1">
                <label for="cb1_1">
                    <img src="images/oneshot_selector.png" />
                </label>
                <input type="checkbox" id="cb1_2" class="cbgroup1" name="cbg1[]" value="2">
                <label for="cb1_2">
                    <img src="images/loop_selector.png" />
                </label>
            </section>
            <section>
                <input type="checkbox" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')">
                <label class="all" for="cbgroup1_master">
                    <img src="images/all_selector.png" />
                </label>
            </section>
            <section>
                <input type="checkbox" id="cb1_3" class="cbgroup1" name="cbg1[]" value="3">
                <label for="cb1_3">
                    <img src="images/sfx_selector.png" />
                </label>
                <input type="checkbox" id="cb1_4" class="cbgroup1" name="cbg1[]" value="4">
                <label for="cb1_4">
                    <img src="images/music_selector.png" />
                </label>
            </section>
        </div>

Answer 1

简单!您的目标是根据以下内容更改 master...

• 如果复选框未选中，请确保母版也未选中
• 否则，请确保在选中母版之前选中所有复选框

转换为 jQuery:

$(".cbgroup1").on("change", function () {

    var $checkbox = $(this),
        $checkboxes = $("#search_attributes").find(".cbgroup1"),
        $master = $("#cbgroup1_master");

    if (!$checkbox.is(":checked")) {
        $master.prop("checked", false);

    } else {
        if ($checkboxes.length === $checkboxes.filter(":checked").length) {
            $master.prop("checked", true);
        }
    }

});

JSFiddle: http://jsfiddle.net/6rc9p0qm/

完成!