jQuery. 如何取消所有复选框的选中状态，除了一个已经被选中的。

Question

我有一些 HTML 元素，例如：

<div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
</div>

现在，我想要的是：如果我点击任何一个复选框 - 这个复选框应该被选中，其他复选框应该被取消选中。我该怎么做？

- Andry

---

你需要的是一个单选按钮... - RRikesh

@François Wahl，没问题！我不知道这个。 - Andry

Answer 1

您可以使用单选按钮并通过name属性对它们进行分组。如果必须使用复选框，则可以按以下方式执行：

在线演示

$('.foo').click(function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

为了处理动态生成的html，你需要使用 on 来代理事件。如果不知道静态父元素，可以使用 document。

$(document).on('click','.foo', function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

如果已知文档可以被静态父级替换。例如，如果 div 包含动态生成的 id 为 parentdiv 的元素，则可以使用以下代码：

如果已知文档可以被静态父级替换。例如，如果 div 包含动态生成的 id 为 parentdiv 的元素，则可以使用以下代码：

`$('#parentdiv').on('click','.foo', function(){`

编辑

根据文档，对于属性 checked、selected 或 disabled ，请使用 prop 方法而非 attr 方法。

自 jQuery 1.6 起，未设置的属性将返回 undefined 。要检索和更改表单元素的选中、禁用状态等 DOM 属性，请使用 prop() 方法。

- Adil

---

非常感谢您的回答。我知道radiobutton组。但是我不能使用它，因为我必须为我的Spring MVC控制器使用不同的名称参数。因此，我决定使用复选框和JavaScript。 - Andry

+1：对于有效的解决方案和演示表示赞同。一般而言，一种简短的替代方法是：“$('.foo').not(this).attr('checked', false);”。 - Nope

感谢 @FrançoisWahl，提供的建议非常好。 - Adil

@FrançoisWahl 您的答案非常有效。谢谢。 - Zaker

虽然我来晚了，但是我觉得这里缺少一件事情：为什么有些人更喜欢使用一组（互斥的）复选框而不是单选按钮？原因之一是，你可以取消所有复选框的选择状态，而对于单选按钮，一旦被选中，就无法回到“未选中”的状态。那么，是否有jquery解决方案呢？ - Cee McSharpface

Answer 2

另一种解决方案

$('.foo').click(function(){     
      $('.foo').not(this).attr('checked', false);      
});

- Joyal

---

这个答案非常被低估。 - Plexis Plexis

如果这不起作用，请尝试 $('.foo').not(this).prop('checked', false);。 - Felipe Castillo

Answer 3

jQuery版本：1.6 =<

$( ".foo" ).change(function() {
    $('.foo').not(this).prop('checked', false);
});

- Sadee

Answer 4

也许这可以帮助你：

.siblings("input[type='checkbox']").attr("checked", true); 

将选择除了被点击的复选框以外的所有复选框。

$("input[type=checkbox]").on("click", function() {

  if ($(this).val() == "none") {
    
    $(this).siblings("input[type=checkbox]").attr('checked', false);
    
  } else {
    
    $(this).siblings("input[value=none]").attr('checked', false);

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <input type="checkbox" id="worker-soft-eaglesoft" checked><label for="worker-soft-eaglesoft">&nbsp;Eaglesoft</label><br>
  <input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix">&nbsp;Dentrix</label><br>
  <input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent">&nbsp;Soft-Dent</label><br>
  <input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon">&nbsp;Denticon</label><br>
  <input type="checkbox" id="worker-soft-other"><label for="worker-soft-other">&nbsp;Other</label><br>

  <input type="checkbox" id="worker-soft-none" value="none">
  <label for="worker-soft-none">&nbsp;No Software Experience - Paper Records Only</label><br>
</div>

- Beefjeff