javascript - 选中时使用多个复选框显示/隐藏多个 Div

Question

我正在尝试使用多个复选框显示/隐藏多个 div。即，如果复选框被选中，它必须使用 id 或名称定位 div，并且 div 内容应该被隐藏。

尝试了以下工作但无法达到要求的目标

<form id="varsection">
    <div class="panel box box-primary">
        <div id="controlledvariables" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
            <div class="box-body">
                <div class="col-md-9">
                    <div class="row secrow">Wave</div>
                    <div class="row secrow">Gender</div>
                </div>
                <div class="col-md-1">
                    //if input name="Wave[]" is selected then
                    <div class="row secrow" style="text-align: center;">
                        <input type="checkbox" name="Wave[]" value="top">
                    </div>
                    <div class="row secrow" style="text-align: center;">
                        <input type="checkbox" name="Gender[]" value="top">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<form id="filters">
    <div>
        //show this div
        <div class="panel box box-primary">
            <div class="box-header with-border">
                <h4 class="box-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#Wave" aria-expanded="false" class="collapsed">
                    Wave
                    </a>
                </h4>
            </div>
            <div id="Wave" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                <div class="box-body">
                    <div class="col-md-8">
                    </div>
                    <div class="col-md-4">
                        //or this one
                        <ul>
                            <li><input type="checkbox"  name="Wave_fiters[]" value="1">Wave-1</li>
                            <li><input type="checkbox" name="Wave_fiters[]" value="2">Wave-2</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        [Other multiple div's]
    </div>
</form>

jQuery

jQuery(function() {
    var checks = $("[name='_Wave[]']");
    checks.click(function() {
        if (checks.filter(':checked').length == checks.length) {
            $("[name='_Wave[]']").show();
        } else {
            $("[name='_Wave[]']").hide();
        }
    }).triggerHandler('click')
})

Answer 1

这段代码有两个问题:

首先jquery选择器是错误的应该是这样的:

var checks = $("[name='Wave[]']");

没有_

其次，你需要给你想要切换的 div 一个唯一的 id 或一个类名

所以你的代码应该是这样的

    jQuery(function () {
        var checks = $("[name='Wave[]']");
        checks.click(function () {
            if (checks.filter(':checked').length == checks.length) {
                $(".waveDiv").show();
            } else {
                $(".waveDiv").hide();
            }
        }).triggerHandler('click')
    })

这是您的输入:

<input type="checkbox" name="Wave[]" value="top">

和将被切换的 div:

<div class="waveDiv panel box box-primary">