多个复选框可显示/隐藏Div

Question

I'm struggling to find a way to have multiple check boxes that can show or hide a div. Basically, I don't want a change function for each individual box. I imagine there's a way to create a function that passes values etc. but I can't figure it out with check boxes.

JS Fiddle Link

<form>
    <label>Show Boxes</label>
    <br>
    <input class="one-box" type="checkbox" name="boxes" value="one" checked>First
    <input class="two-box" type="checkbox" name="boxes" value="two" checked>Second
    <input class="three-box" type="checkbox" name="boxes" value="three" checked>Third
    <input class="four-box" type="checkbox" name="boxes" value="four" checked>Fourth</form>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

div {
    width: 300px;
    height: 100px;
}
.one {
    background: red;
}
.two {
    background: green;
}
.three {
    background: blue;
}
.four {
    background: black;
}
.hide {
    display: none;
}

$('.one-box').change(function () {
    $('.one').toggleClass('hide');
});

$('.two-box').change(function () {
    $('.two').toggleClass('hide');
});

$('.three-box').change(function () {
    $('.three').toggleClass('hide');
});

$('.four-box').change(function () {
    $('.four').toggleClass('hide');
});

Answer 1

You can compress this into one statement, by doing the following:

1) add a data attribute with the color on the checkbox:

<input type="checkbox" ... data-target=".one">

2) Add a global handler like the following:

//Or, change all of the boxes to just .box, and use that below
$('.one-box,.two-box,.three-box,.four-box').change(function () {
    var target = $(this).data("target");
    $(target).toggleClass('hide');
});

Answer 2

You can write a function like this:

function ToggleShow(checkbox, div) {
    $(checkbox).change(function () {
        $(div).toggleClass('hide');
    });
}

And then just call it and send the params like this demo shows.

Answer 3

Or you could do it like this: Check for the value that the input already has: http://jsfiddle.net/svArtist/rfhtw9jL/

$('.togglebox').change(function () {
    $("."+this.value).toggleClass('hide');
});

Using classes to group the Checkboxes:

<form>
    <label>Show Boxes</label>
    <br>
    <input class="togglebox" id="one-box" type="checkbox" name="boxes" value="one" checked>First
    <input class="togglebox" id="two-box" type="checkbox" name="boxes" value="two" checked>Second
    <input class="togglebox" id="three-box" type="checkbox" name="boxes" value="three" checked>Third
    <input class="togglebox" id="four-box" type="checkbox" name="boxes" value="four" checked>Fourth</form>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

Answer 4

Added a class to each checkboxes as chk

$(".chk").on('change',function(){
var self=$(this);
    var aData= self.attr("value");
    $("."+aData).toggleClass('hide')
});

http://jsfiddle.net/v0d93ec9/1/

Answer 5

check this jsfiddle. beware changes are also madee in html

http://jsfiddle.net/phqwbk4a/

<form>
<label>Show Boxes</label>
<br>
<input class="one-box" type="checkbox" name="boxes" value="one" checked>First
<input class="two-box" type="checkbox" name="boxes" value="two" checked>Second
<input class="three-box" type="checkbox" name="boxes" value="three" checked>Third
<input class="four-box" type="checkbox" name="boxes" value="four" checked>Fourth</form>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>


$('.cbox').change(function () {
var check = $(this);
box = check.data("box");    
if(check.is(':checked')){
    $("."+box).removeClass("hide");
}else{
    $("."+box).addClass("hide");
}
});

Answer 6

Perform the toggle when you click on a checkbox. $('input[type=checkbox]') will follow all your checkboxes. If you have more than these checkboxes I suggest giving these all the same class and use $('className') . Since you already have the class name of your div in the value of your checkbox you can use $(this).val() to get it. Just replace your JS with this:

$('input[type=checkbox]').on('click', function() {
    var div = '.' + $(this).val();
    $(div).toggleClass('hide');
});