如果取消选择了一个输入，如何取消选择"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

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

• 如果没有选中复选框，请确保主人没有选中
• 否则，请确保检查所有复选框，然后检查主

翻译为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/

完成！

Answer 2

我在这里真的没有看到任何jQuery，但是由于您有标签，我将使用它！

首先，我们可以稍微更改HTML：

<input type="checkbox" id="cbgroup1_master" data-group="cbgroup1">

然后，我们可以将绑定移至JavaScript（顺便说一句，我建议您将功能定义放在就绪函数中，而只是将代码放在一起）：

$(document).ready(function() {
    function togglecheckboxes() {
        var $this = $(this);
        $('.'+ $this.data('group')).prop('checked', $this.is(':checked'));
    }
    $('#cbgroup1_master').on('change', togglecheckboxes);
});

将设置关联组的检查状态以匹配父母。现在让孩子们撤消父母。我们可以稍微改变它们的结构以提供帮助：

<input type="checkbox" id="cb1_1" class="cbgroup" name="cbg1[]" value="1" data-group="1">

然后，在就绪功能中，我们可以通过共享类绑定到它们。

$('.cbgroup').on('change', function() {
    var $this = $(this);
    if (!$this.is(':checked')) {
        $('#cbgroup'+ $this.data('group') +'_master').prop('checked', false);
    }
});

这是在CBGroup更改的情况下，它将基于数据组将父母更改为未检查（如果最初已检查），以了解要去哪个父。

。

由于您在示例中没有任何jQuery，因此只是为了确保您已通知您，我将包括以下内容。如果这是" duh" ，对不起，：）。

使用jQuery，在选择器中（例如$('selector')），使用$('.string')将找到'string'是其类别的所有元素。使用$('#string')将找到'string'是id的元素。