jQuery。如何取消选中除一个（已选中）之外的所有复选框答案

【问题标题】：jQuery. How to uncheck all checkboxes except one (which was checked)jQuery。如何取消选中除一个（已选中）之外的所有复选框
【发布时间】：2020-08-03 03:18:22
【问题描述】：

我有 html 项目，4 个例子：

<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>

现在，我想要下一个：如果我单击任何复选框 - 应选中该复选框，而应取消选中其他复选框。我该怎么做？

【问题讨论】：

你想要的叫做单选按钮...
@François Wahl，没问题！我不知道。

标签： jquery checkbox

【解决方案1】：

您可以使用radio 按钮并按名称属性对它们进行分组。如果您必须使用checkboxes 进行操作，那么您可以这样做，

Live Demo

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

对于动态生成的 html，您需要 on，它允许您使用静态父级委托事件，您可以在不知道静态父级的情况下使用文档。

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

如果已知，文档可以被静态父级替换。例如如果 div 包含动态生成的 id parentdiv 那么你可以拥有

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

编辑

使用 prop 而不是 attr 属性 checked、selected 或 disabled 根据文档。

从 jQuery 1.6 开始，.attr() 方法返回未定义的属性尚未设置。检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，使用 .prop() 方法。

【讨论】：

非常感谢您的回答。我知道radiobutton 组。但我不能使用它，因为我的 Spring MVC 控制器必须有不同的名称参数。由于这个原因，我决定使用复选框和 JavaScript
+1：用于工作解决方案和演示。通常，1 行替代方案是：$('.foo').not(this).attr('checked', false);
感谢@FrançoisWahl，建议的陈述非常好。
各位大佬，如果html是jQuey动态生成的，那就不行了！ :(这种情况我该怎么办？
您需要开启才能绑定点击事件，我已经更新了答案。

【解决方案2】：

另一种解决方案

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

【讨论】：

这个答案被低估了
如果这不起作用，请尝试$('.foo').not(this).prop('checked', false);

【解决方案3】：

jQuery V: 1.6 =

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

【讨论】：

【解决方案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>

【讨论】：