Question

我有一个搜索过滤器，可以在选中时切换所有过滤器。我的问题是，如果您取消选择所有或其中一个过滤器，则所有按钮仍然保持打开状态。如果取消选择过滤器或所有过滤器，我怎么能这样做，所有按钮将自动选择。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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中（顺便说一句，我不建议你将函数定义放在ready函数中，只是将代码保持在一起）：

$(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">

然后在ready函数中，我们可以使用共享类绑定它们。

$('.cbgroup').on('change', function() {
    var $this = $(this);

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

在cbgroup发生变化的情况下，它会根据数据组将其父级更改为未选中（如果最初检查过），以了解要转到哪个父级。

由于您的示例中没有任何jquery，为了确保您获得通知，我将包含以下内容。如果这是＆＃34; duh＆＃34; 给你，我很抱歉，:)。

使用jquery，在选择器（例如$('selector')）中，使用$('.string')将找到'string'属于他们类的所有元素。使用$('#string')会找到'string'为id的元素。

你怎么取消选择＆＃34;所有＆＃34;选择器是否取消选择一个输入

2 个答案: