我有多个复选框有自己的相关 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 个这样的复选框，那么代码太长了。那么我如何解决我的问题。
不知道这是否是基本的，但只是编程的新手。
谢谢你。
请提供唯一的ID在你的每一个元素HTML DOM。如果你想保持奇异性，你可以提供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'));
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句