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选择器是错误的，应该是这样的：

   dir  price   max
0    1    100   194
1    1    150   194
2    1    190   194
3    1    194   194
4    0    152   NaN
5    0    151   NaN
6    1    131   168
7    1    168   168
8    1    112   168
9    0    193   NaN

没有 _

您需要为div分配唯一的ID或类名

所以您的代码应该像这样

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

这是您的输入内容：

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

和您将切换的div：

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

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

1 个答案: