javascript - 如何将选中的复选框一次限制为一个？

Question

我正在尝试使用复选框创建过滤器。我一次只需要选中一个复选框。我该怎么做？

场景:该页面有 watch 目录。用户想要根据男性或女性过滤 watch

这是我的代码:

$("#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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>

提前致谢!

Answer 1

复选框用于选择多个选项值。您需要的是单选按钮。它们正是用于此目的。一次只能选择一个单选按钮。因此，将您的代码替换为:

<ul id="filter-options">
  <li><input type="radio" name="filter" value="filter_man" data-filter_id="man"> Man</li>
  <li><input type="radio" name="filter" value="filter_woman" data-filter_id="woman"> Woman</li>
</ul>

在此处查看示例: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio