Question

我有多个复选框有自己的相关div，当点击一个复选框时，它显示其相关的div并且未经检查隐藏它....问题是当我点击另一个复选框时它会隐藏其他先前的复选框div。 / p>

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个这样的复选框，那么代码太长。然后我如何解决我的问题。

不知道这是不是基本的，而只是编程新手。

谢谢。

Answer 1

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

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

1 个答案: