Question

我很难找到一种方法来拥有多个可以显示或隐藏div的复选框。基本上，我不希望每个盒子都有一个更改功能。我想有一种方法可以创建一个传递值等的函数，但我无法通过复选框来解决这个问题。

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

然后只需调用它并发送类似demo节目的参数。

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

多个复选框显示/隐藏Div

6 个答案: