Javascript 显示/隐藏div的多个复选框

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

展示箱


弗斯特
第二
第三
第四
div{
宽度：300px；
高度：100px；
}
.一{
背景：红色；
}
.二{
背景：绿色；
}
.三{
背景：蓝色；
}
.4{
背景：黑色；
}
.隐藏{
显示：无；
}
$（'.one-box'）.change（函数（）{
$（'.one'）.toggleClass（'hide'）；
});
$（'.two-box'）.change（函数（）{
$（'.two'）.toggleClass（'hide'）；
});
$（'.three box'）。更改（函数（）{
$（'.three'）.toggleClass（'hide'）；
});
$（'.four box'）。更改（函数（）{
$（'.four'）.toggleClass（'hide'）；
});

您可以通过执行以下操作将其压缩为一条语句：

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

1） 使用复选框上的颜色添加数据属性：

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

---

您可以编写如下函数：

function ToggleShow(checkbox, div) {
    $(checkbox).change(function () {
        $(div).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>

展示箱


弗斯特
第二
第三
第四

在每个复选框中添加了一个类作为

chk

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

---

检查此JSFIDLE。注意html中也有更改

展示箱


弗斯特
第二
第三
第四
$（'.cbox'）.change（函数（）{
var check=$（此）；
方框=复选框数据（“方框”）；
if（check.is（'：checked'））{
$（“+box）.删除类（“隐藏”）；
}否则{
$（“+box）.addClass（“隐藏”）；
}
});

单击复选框时执行切换

$（'input[type=checkbox]'）

将跟随您的所有复选框。如果您有多个复选框，我建议将这些复选框设置为所有相同的类，并使用

$（'className'）

。由于复选框的值中已经有div的类名，因此可以使用

$（this）.val（）

获取它。只需将您的JS替换为以下内容：

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

---

使用一个类来处理所有框会更简单。如果没有，也可以使用

$（“输入[type=checkbox]”

。OP必须在每次添加、删除或更改divPlus时更改函数，这将有一个冗余，复选框已具有一个名称，指示其target@BenPhilipp由于各种原因，假设名称之间存在协同关系并不总是安全的。在某些情况下直言不讳并没有错。我假设这是一个模拟的例子，不一定显示出手头的确切问题。这个解决方案只增加很少的开销；只需添加目标属性——这并不难。为什么在单独的步骤中使用“self”变量和aData会如此复杂？我建议

$（“+this.value）.toggleClass（'hide'）（参见我的答案）缓存变量是我的习惯，缓存jQuery选择器有助于提高性能。我知道在这种情况下是没有必要的，但我以前是这样做的。顺便说一句，它一点也不复杂，相反，从我的观点来看，它更具可读性。我明白你的观点（我所说的复杂不是流线型的），我希望你们两个都能解决这个问题，如果其中一个复选框没有被选中的话。尝试使用JSFIDLE，如果未选中，您将看到该框仍然存在。如果不选中一个框，您将看到。当您打算以整个对象组为目标时，请使用CLASSES
。className
。要以单个对象为目标，请使用IDs
#idName
$(".chk").on('change',function(){
var self=$(this);
    var aData= self.attr("value");
    $("."+aData).toggleClass('hide')
});

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

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