选择特定复选框时如何显示和隐藏 div？答案

【问题标题】：How to show and hide the div when a perticular checkbox is selected?选择特定复选框时如何显示和隐藏 div？
【发布时间】：2018-03-08 11:52:02
【问题描述】：

我有多个具有自己相关 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应该是唯一的。尝试为 div 元素指定一个唯一的 id

标签： javascript jquery html

【解决方案1】：

请为您的HTML DOM 中的每个元素提供唯一标识。如果要保持奇点，可以提供class，而不是id。我提供了 jquery 解决方案。检查下面的 sn-p，如有任何疑问，请告知。

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

【讨论】：