如何使複選框在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

您可以藉助以下代碼：

小提琴鏈接：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); 
     } 
    }); 
}); 

Answer 4

這是我會怎麼做：

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

Here is the JSFiddle demo