如何在javascript中使复选框独占？

Question

在多选问题中，如果最后一个复选框（“以上都不是”）被选中，如何取消选中所有选定的选项（如果有）？

Answer 1

这取决于你的 html 结构，但我可以举个例子

$('input').change(function() {
  var $el = $(this);
  
  if ($el.attr('id') == 'none' && $el.prop('checked')) {
    $('input').not($el).prop('checked', false);
  } else {
    $('#none').prop('checked', false);  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="op1" type="checkbox" /><label for="op1">Option 1</label>
  <input id="op2" type="checkbox" /><label for="op2">Option 2</label>
  <input id="op3" type="checkbox" /><label for="op3">Option 3</label>
  <input id="op4" type="checkbox" /><label for="op4">Option 4</label>
  <input id="op5" type="checkbox" /><label for="op5">Option 5</label>
  <input id="none" type="checkbox" /><label for="none">None</label>
</div>

Answer 2

您可以获取应用在所有复选框上的通用类名，然后使用以下代码：

 $('.checkboxCSS').click(function(){
     if($(this).attr('id') == 'none')
          $('.checkboxCSS').not(this).attr('checked', false);
    });

Answer 3

我会这样做：

$("[name='none']").click(function(){
    if($(this).attr('checked')=="checked"){
        $(this).siblings().attr('checked', false);
    }
});

Here is the JSFiddle demo

Answer 4

您可以参考以下代码：

小提琴链接：http://jsfiddle.net/sqz75b9g/12/

HTML：

<div class="row">
    <input type="checkbox" class="selectanswer"/>select 0
    <input type="checkbox" class="selectanswer"/>select 1
    <input type="checkbox" class="selectanswer"/>select 2
    <input type="checkbox" class="selectanswer"/>select 3
    <input type="checkbox" class="selectanswer"/>None of the above
</div> 

Javascript：

    $(document).ready(function(){
    $(".selectanswer").click(function(){
        var currentParent = $(this).closest(".row");
        var checkboxGroup = $(currentParent).find(".selectanswer");
        if($(this).prop("checked") && $(this).index() == checkboxGroup.length-1)
        {
            $(checkboxGroup).not(this).prop('checked', false);
        }
        else
        {
            $(checkboxGroup).eq(checkboxGroup.length-1).prop('checked', false);
        }
    });
});