我有多个复选框，它们都有自己的相关 div，当单击一个复选框时，它会显示其相关的 div，而未选中的则会隐藏它....问题是当我单击另一个复选框时，它会隐藏其他先前的复选框 div。
var x = document.getElementById("icon");
function hide(event) {
if (event.checked) {
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
} else {
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
}
<html>
<body>
<label><input type="checkbox" name="checkbox[]" onchange="hide(this)" id="extra" value="something"/>something
<div id="icon"><a href="#"><i id="subs" class="fa fa-minus-circle"></i></a><br>
<input type="text" id="noOfRoom" value="0" /><br>
<a href="#"><i id="adds" class="fa fa-plus-square"></i></a>
</div>
</label>
<label><input type="checkbox" name="checkbox[]" onchange="hide(this)" id="extra" value="something1"/>something1
<div id="icon"><a href="#"><i id="subs" class="fa fa-minus-circle"></i></a><br>
<input type="text" id="noOfRoom" value="0" /><br>
<a href="#"><i id="adds" class="fa fa-plus-square"></i></a>
</div>
</label>
<label><input type="checkbox" name="checkbox[]" onchange="hide(this)" id="extra" value="something2"/>something2
<div id="icon"><a href="#"><i id="subs" class="fa fa-minus-circle"></i></a><br>
<input type="text" id="noOfRoom" value="0" /><br>
<a href="#"><i id="adds" class="fa fa-plus-square"></i></a>
</div>
</label>
</body>
</html> 我尝试为每个功能创建单独的函数，但如果有 50 个这样的复选框，那么代码就太长了。那么我如何解决我的问题。
不知道这是否是基本的，只是编程的新手。
谢谢。
最佳答案
请为 HTML DOM 中的每个元素提供唯一 ID。如果您想保持单一性，可以提供 class 而不是 id。我已经提供了 jquery 解决方案。检查下面的代码片段并告知任何疑问。
$('.extra').on('change', function() {
if ($(this).prop('checked')) //if it is checked
$(this).closest('label').find('.icon').show(); //show the div with class icon
else
$(this).closest('label').find('.icon').hide(); //hide the div
});.icon {
display: none;
}
label {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" name="checkbox[]" id="extra" class="extra" value="something"/>something
<div class="icon"><a href="#"><i id="subs" class="fa fa-minus-circle"></i></a><br>
<input type="text" id="noOfRoom" value="0" /><br>
<a href="#"><i id="adds" class="fa fa-plus-square"></i></a>
</div>
</label>
<label>
<input type="checkbox" name="checkbox[]" id="extra1" class="extra" value="something1"/>something1
<div class="icon"><a href="#"><i id="subs1" class="fa fa-minus-circle"></i></a><br>
<input type="text" id="noOfRoom" value="0" /><br>
<a href="#"><i id="adds1" class="fa fa-plus-square"></i></a>
</div>
</label>
<label>
<input type="checkbox" name="checkbox[]" id="extra2" class="extra" value="something2"/>something2
<div class="icon"><a href="#"><i id="subs2" class="fa fa-minus-circle"></i></a><br>
<input type="text" id="noOfRoom" value="0" /><br>
<a href="#"><i id="adds2" class="fa fa-plus-square"></i></a>
</div>
</label>您还可以将上述 jquery 更新为更简单的版本。
$('.extra').on('change', function() {
$(this).closest('label').find('.icon').toggle($(this).prop('checked'));
});
关于javascript - 当选中特定复选框时如何显示和隐藏 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48941891/