jQuery：取消选中一个选中的其他复选框答案

【问题标题】：jQuery: Uncheck other checkbox on one checkedjQuery：取消选中一个选中的其他复选框
【发布时间】：2013-07-21 00:52:39
【问题描述】：

我总共有 6 个复选框（将来可能会添加更多），我想只允许选择一个，所以当用户选中其中任何一个时，其他应该取消选中。

如果我定义了 ID，我尝试使用此代码并且工作正常，但现在只是想知道如何以有效的方式使其反之亦然，所以将来如果我添加更多内容不会有问题

$('#type1').click(function() {
     $('#type2').not('#type1').removeAttr('checked');
});

仅供参考，复选框不是同级的，并且位于不同的<td>

【问题讨论】：

如果你总是想选中一个复选框，为什么不使用单选按钮呢？
@AGuif，由于某些限制，我无法使用单选按钮。我只能选择使用复选框。
您正在描述无线电输入。
他不是说他一直要检查一个，他最多要检查一个，这不一样
可能的原因：使用复选框，您可以在第二次单击时重置组中的所有值，这是单选按钮的异常行为

标签： jquery checkbox

【解决方案1】：

绑定一个change 处理程序，然后取消选中除选中的复选框之外的所有复选框：

$('input.example').on('change', function() {
    $('input.example').not(this).prop('checked', false);  
});

Here's a fiddle

【讨论】：

伟大的，完全有效的
在我的情况下，此代码不会删除先前选择的选中单选按钮。请用 11 票将接受的答案更改为下面的答案，（如果可以的话）.. 干杯..
@vidal 这个答案是正确的。你使用的是旧版本的 jQuery 吗？
这在纯 js 中看起来如何？

【解决方案2】：

您可以为所有复选框使用类，然后：

$(".check_class").click(function() {
  $(".check_class").attr("checked", false); //uncheck all checkboxes
  $(this).attr("checked", true);  //check the clicked one
});

【讨论】：

Sudhir, bahot shukriya 但是当它选中第二个复选框时，它不会删除并永远选中
.prop() 是这里的首选方法。顺便说一句，您可以从第一组匹配元素中排除“this”
@pixelngrain 看看 billyonecan 的 jsfiddle，真的更好，你应该使用 onchange 事件而不是 onclick，特别是对于旧浏览器
+1 @billyonecan 你的代码太棒了。这正是我想要的。并保持复选框的行为。
将其发布为答案，这样JS新手更容易记住和使用。

【解决方案3】：

试试这个

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

【讨论】：

$('input[type="checkbox"]').not(this).prop("checked", false); 就够了

【解决方案4】：

如果复选框是在循环中生成的，我想添加一个答案。例如，如果您的结构是这样的（假设您在 View 上使用服务器端结构，例如 foreach 循环）：

<li id="checkboxlist" class="list-group-item card">
  <div class="checkbox checkbox-inline">
    <label><input type="checkbox" id="checkbox1">Checkbox 1</label>
    <label><input type="checkbox" id="checkbox2">Checkbox 2</label>
  </div>
</li>

<li id="checkboxlist" class="list-group-item card">
  <div class="checkbox checkbox-inline">
    <label><input type="checkbox" id="checkbox1">Checkbox 1</label>
    <label><input type="checkbox" id="checkbox2">Checkbox 2</label>
  </div>
</li>

对应Jquery：

$(".list-group-item").each(function (i, li) {
  var currentli = $(li);
  $(currentli).find("#checkbox1").on('change', function () {
       $(currentli).find("#checkbox2").not(this).prop('checked',false);
  });

  $(currentli).find("#checkbox2").on('change', function () {
       $(currentli).find("#checkbox1").not(this).prop('checked', false);
  });
});

工作演示：https://jsfiddle.net/gr67qk20/

【讨论】：

【解决方案5】：

试试这个

$("[id*='type']").click(
function () {
var isCheckboxChecked = this.checked;
$("[id*='type']").attr('checked', false);
this.checked = isCheckboxChecked;
});

为了使其更加通用，您还可以通过在它们上实现的公共类找到复选框。

修改...

【讨论】：

Shukriya Abhishek，当我点击选中的复选框时，代码工作正常，它正在删除并选中另一个复选框。任何解决方案？

【解决方案6】：

$('.cw2').change(function () {
    if ($('input.cw2').filter(':checked').length >= 1) {
        $('input.cw2').not(this).prop('checked', false);
    } 
});


$('td, input').prop(function (){
    $(this).css({ 'background-color': '#DFD8D1' });
    $(this).addClass('changed');
});

【讨论】：

欢迎来到 SO。如果您解释为什么您的答案有效以及需要更改的内容会有所帮助。

【解决方案7】：

我认为在布尔属性方面 prop 方法更方便。 http://api.jquery.com/prop/

【讨论】：