mercredi 15 juillet 2015

How to limit the checked checkboxes to just one at a time?

I am trying to create a filter using checkboxes. I need to only have one checkbox checked at a time. How do I do this?

Scenario: The page has a catalog of watches. The user wants to filter the watches according to for men or for women

Here is my code:

$("#filter-options :checkbox").click(function() 
        {
        $(".collection-wrapper .strap-wrapper").hide();
        $("#filter-options :checkbox:checked").each(function() 
        {
           $("." + $(this).val()).fadeIn();
                });
       
        if($('#filter-options :checkbox').filter(':checked').length < 1) 
        {
                $(".collection-wrapper .strap-wrapper").fadeIn();
                
        }
        
    });
<script src="http://ift.tt/1oMJErh"></script>

<h3>Filter Items</h3>
<ul id="filter-options">
  <li><input type="checkbox" value="filter_man" data-filter_id="man"> Man</li>
  <li><input type="checkbox" value="filter_woman" data-filter_id="woman"> Woman</li>
</ul>


<div class="collection-wrapper">
  <div class="strap-wrapper filter_man">
    <h2>man</h2>
    <p></p>
  </div>
  <div class="strap-wrapper filter_woman">
    <h2>woman</h2>
    <p></p>
  </div>
  <div class="strap-wrapper filter_man filter_woman">
    <h2>man / woman</h2>
    <p></p>
  </div>
  <div class="strap-wrapper filter_woman">
    <h2>woman</h2>
    <p></p>
  </div>
</div>

Thanks in advance!




Aucun commentaire:

Enregistrer un commentaire