CODEWITHSUNDEEP
javascriptjqueryhtml
Puneet
Puneet

Reputation: 645

How to show and hide the div when a perticular checkbox is selected?

I am having multiple check boxes having their own related div with when one checkbox is clicked it shows its related div and with unchecked hides it....problem is when I click the other checkbox it hides other previous checkboxes div's.

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>

I tried to make separate function for each but if there are 50 checkboxes like this then the code is too long. then how I solve my problem.

don't know if this is basic but just new to programming.

Thank you.

Upvotes: 0

Views: 78

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Please provide unique id for each element in your HTML DOM. If you want to maintain singularity, you can provide class instead of id. I've provided jquery solution. Check the below snippet and let know for any queries.

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

You can also update the above jquery to simpler version.

$('.extra').on('change', function() {
    $(this).closest('label').find('.icon').toggle($(this).prop('checked')); 
});

Upvotes: 2

Related Questions