javascript - 显示/隐藏 Div 的多个复选框

Question

我正在努力寻找一种方法来拥有多个可以显示或隐藏 div 的复选框。基本上，我不希望每个单独的框都有更改功能。我想象有一种方法可以创建传递值等的函数，但我无法通过复选框来解决。

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

您可以通过执行以下操作将其压缩到一条语句中:

1) 在复选框上添加一个带有颜色的数据属性:

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

2) 添加如下全局处理程序:

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