选中时使用多个复选框显示/隐藏多个分区

Question

我试图使用多个复选框显示/隐藏多个div。也就是说，如果选中复选框，则必须使用id或name将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[]']");

无_

其次，您需要给出要切换唯一id或类名的div。

所以你的代码应该是这样

    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 class="waveDiv panel box box-primary">