jQuery：选中一个复选框时取消其他复选框的选中状态

Question

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

我尝试使用这段代码，并且如果我定义了ID，它可以正常工作，但现在我想知道如何以更有效的方式实现相反的效果，以便将来添加更多不会成为问题。

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

顺便提一下，复选框不是兄弟元素，并且位于不同的 <td> 中。

- Code Lover

---

如果你希望始终选中一个复选框，为什么不使用单选按钮呢？ - AGuif

@AGuif，由于某些限制，我无法使用单选按钮。我只有使用复选框的选项。 - Code Lover

你在描述一个单选按钮输入框。 - Anthony

他并没有说他总是想要一个被检查过的，他最多只想要一个被检查过的，这两者是不同的。 - BlackTigerX

可能的原因是：使用复选框时，您可以在第二次单击时重置组中的所有值，这对于单选按钮来说是异常行为。 - ymakux

Answer 1

绑定一个change事件处理程序，然后只需取消选中的所有复选框，除了已选中的那个:

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

这里是一个fiddle

- billyonecan

---

伟大的，完全有效的。 - A. Wolff

这段代码在我的情况下无法删除先前选择的已选中单选按钮。如果可以，请将接受的答案更改为以下获得11个赞的答案。干杯。 - vidal

@vidal 这个回答是正确的。你使用的jQuery版本太旧了吗？ - billyonecan

这在纯JS中会是什么样子？ - utdev

Answer 2

你可以为所有复选框使用class，然后执行：

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

- Sudhir Bastakoti

---

Sudhir，非常感谢，但当第二个复选框被选中时，它不会被移除并且将一直保持选中状态。 - Code Lover

.prop() 是此处首选的方法。顺便说一下，您可以从第一组匹配元素中排除 'this'。 - A. Wolff

@pixelngrain 看看billyonecan的jsfiddle，真的更好，你应该使用onchange事件而不是onclick，特别是对于旧浏览器。 - A. Wolff

+1 @billyonecan，你的代码太棒了。它完全符合我的要求，并且保持了复选框的行为。 - Code Lover

将其作为答案发布，这样JS新手就更容易记住和使用。 - catlovespurple

Answer 3

试试这个

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

- Amit

---

$('input[type="checkbox"]').not(this).prop("checked", false); 已足够。 - A. Wolff

Answer 4

$('.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');
});

- rogieo

---

欢迎来到SO。如果您解释为什么您的答案可行以及需要做出哪些更改，那将会很有帮助。 - Karl Gjertsen

Answer 5

试试这个

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

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

修改后...

- Abhishek Jain

---

谢谢Abhishek，代码运行良好，只有一个问题，当我点击选中的复选框时，它会将另一个复选框取消选中。有什么解决办法吗？ - Code Lover

Answer 6

如果复选框是在一个循环中生成的，我想添加一个答案。例如，如果您的结构像这样（假设您在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/

- Rahul Sharma

Answer 7

我认为在处理布尔属性时，prop方法更加方便。 http://api.jquery.com/prop/

- nubinub