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

Question

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

JS小提琴链接

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

Answer 2

您可以编写如下函数：

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

然后，只需调用它并发送如本演示所示的参数即可。

Answer 3

或者，您也可以这样做：检查输入值是否已经具有： http : //jsfiddle.net/svArtist/rfhtw9jL/

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

使用类对复选框进行分组：

<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

为每个复选框添加一个类，如chk

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

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

Answer 5

检查这个jsfiddle。 当心更改也在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

单击复选框时执行切换。 $('input[type=checkbox]')将跟随您的所有复选框。 如果您拥有的复选框不止这些，我建议给所有这些都相同的类，并使用$('className') 。 由于您已经在复选框的值中包含div的类名，因此可以使用$(this).val()来获取它。 只需用以下代码替换您的JS：

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