dimanche 7 juin 2020

Show only Checked Options using Jquery

How to show only those options which are checked and hide all those which are not checked?

My code just shows checkbox, and not the label.

$("#checked_show").click(function() {

  $("input").hide();
  $("label").hide();
  $("input:checked").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>

<br /><br />

<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>

<br /><br />

<button id="checked_show">Show only Checked</button>

How to show only those options which are checked and hide all those which are not checked?

My code just shows checkbox, and not the label.

Aucun commentaire:

Enregistrer un commentaire