CODEWITHSUNDEEP
javascriptjquery
user7698060
user7698060

Reputation:

Show/Hide Multiple Div using multiple checkbox when checked

I am trying to show/hide multiple div's using multiple checkboxes. i.e. if a checkbox is checked it must target div using id or name and the div contents should be hidden.

Tried the following work but unable to achieve the required goal

<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')
})

Upvotes: 1

Views: 1463

Answers (1)

Mahmoud Fawzy
Mahmoud Fawzy

Reputation: 1675

you have 2 problems with this code:

first the jquery selector is wrong it should be like this:

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

without _

second you need to give the div you want to toggle a unique id or a class name

so your code should be like this

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

and this is your input:

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

and your div which will be toggled:

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

Upvotes: 1

Related Questions