選中時使用多個復選框顯示/隱藏多個 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">