Question

使用以下HTML复选框代码

<input type="checkbox" class="example" checked />2016
<input type="checkbox" class="example" />2015
<input type="checkbox" class="example" />2014
<input type="checkbox" class="example" />2013
<input type="checkbox" class="example" />2012
<input type="checkbox" class="example" />2011
<input type="checkbox" class="example" />2010

我需要对以下jQuery进行哪些更改

 $(function() { 
     $('input[type="checkbox"]').bind('click',function() {
        $('input[type="checkbox"]').not(this).prop("checked", false);
     });
});

以便始终检查其中一个复选框，不允许空白复选框？

Answer 1

好像你不想使用单选按钮。这是您的更新代码，它可以根据需要运行。您需要确保通过重新单击不会取消选中复选框。

$(function() { 
     $('input[type="checkbox"]').bind('click',function() {
         if($(this).prop('checked') === false) {
           $(this).prop('checked', true);
         }
         $('input[type="checkbox"]').not(this).prop("checked", false);
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input type="checkbox" class="example" checked />2016
<input type="checkbox" class="example" />2015
<input type="checkbox" class="example" />2014
<input type="checkbox" class="example" />2013
<input type="checkbox" class="example" />2012
<input type="checkbox" class="example" />2011
<input type="checkbox" class="example" />2010

Answer 2

好像你有漂亮的UI组件和复选框，这就是为什么你不想使用无线电输入？

关于您的问题：您的代码可以按照需要运行

 $(function() { 
     $('input[type="checkbox"]').bind('click',function() {
        $(this)
          .parent()
          .find('[type="checkbox"]').not(this)
          .removeAttr('checked');
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="example" checked />2016
<input type="checkbox" class="example" />2015
<input type="checkbox" class="example" />2014
<input type="checkbox" class="example" />2013
<input type="checkbox" class="example" />2012
<input type="checkbox" class="example" />2011
<input type="checkbox" class="example" />2010

Answer 3

还有另一种（更短的）实现方法：

$(function() { 
   $(':checkbox').click(function(){
      $(this).prop('checked', true).siblings(':checkbox').prop("checked", false);
   });
});

它将始终检查单击的元素并取消选中所有兄弟姐妹。

jQuery总是选中一个复选框

3 个答案: