提问人：Code Lover 提问时间：7/22/2013 更新时间：3/3/2020 访问量：150664
jQuery：取消选中一个复选框上的其他复选框
jQuery: Uncheck other checkbox on one checked
问：
我总共有 6 个复选框（将来可能会添加更多），我只想允许选择一个，所以当用户选中其中任何一个时，其他应该取消选中。
我尝试过使用此代码，如果我定义了 ID，则可以正常工作，但现在只是想知道如何以有效的方式使其反之亦然，因此将来如果我添加更多，它不会成为问题
$('#type1').click(function() {
$('#type2').not('#type1').removeAttr('checked');
});
仅供参考，复选框不是兄弟姐妹，并且位于不同的位置<td>
答：
16赞
Sudhir Bastakoti
7/22/2013
#1
您可以将 class 用于所有复选框，并执行以下操作：
$(".check_class").click(function() {
$(".check_class").attr("checked", false); //uncheck all checkboxes
$(this).attr("checked", true); //check the clicked one
});
评论
0赞
Code Lover
7/22/2013
Sudhir，bahot shukriya，但是当它选中第二个复选框时，它不会删除并永远选中
2赞
A. Wolff
7/22/2013
.prop（） 是这里的首选方法。顺便说一句，您可以从第一组匹配元素中排除“this”
0赞
A. Wolff
7/22/2013
@pixelngrain看到 billyonecan 的 jsfiddle，真的更好，你应该使用 onchange 事件而不是 onclick，尤其是对于较旧的浏览器
0赞
Code Lover
7/22/2013
+1 @billyonecan你的代码太棒了。它完全符合我的要求。并保留复选框行为。
0赞
catlovespurple
8/19/2015
将其作为答案发布，因为这样 JS 新手更容易记住和使用。
1赞
Abhishek Jain
7/22/2013
#2
试试这个
$("[id*='type']").click(
function () {
var isCheckboxChecked = this.checked;
$("[id*='type']").attr('checked', false);
this.checked = isCheckboxChecked;
});
为了使它更加通用，您还可以通过在其上实现的通用类来查找复选框。
改 性。。。
评论
0赞
Code Lover
7/22/2013
Shukriya Abhishek，代码工作正常，当我单击它正在删除的复选框并选中另一个复选框时，只有一个问题。有什么解决办法吗？
0赞
nubinub
7/22/2013
#3
我认为 prop 方法在布尔属性方面更方便。http://api.jquery.com/prop/
5赞
Amit
7/22/2013
#4
试试这个
$(function() {
$('input[type="checkbox"]').bind('click',function() {
$('input[type="checkbox"]').not(this).prop("checked", false);
});
});
评论
1赞
A. Wolff
7/22/2013
$('input[type="checkbox"]').not(this).prop("checked", false);就够了
192赞
billyonecan
7/22/2013
#5
绑定一个处理程序，然后取消选中所有复选框，除了选中的复选框：change
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});
这是一把小提琴
评论
0赞
vidal
9/16/2016
在我的情况下，此代码不会删除先前选择的选中单选按钮。请将接受的答案更改为以下 11 个赞成票，（如果可以的话）..干杯。。
0赞
billyonecan
9/16/2016
@vidal这个答案是正确的。你使用的是真正旧版本的jQuery吗？
0赞
utdev
4/4/2017
这在纯 js 中会是什么样子？
1赞
rogieo
10/26/2016
#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');
});
评论
1赞
Karl Gjertsen
10/26/2016
欢迎来到 SO。如果你解释为什么你的答案有效以及需要改变什么，这会有所帮助。
1赞
Rahul Sharma
3/2/2020
#7
如果复选框是在循环中生成的，我想添加一个答案。例如，如果你的结构是这样的（假设你在 上使用服务器端结构，就像一个循环）：Viewforeach
<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);
});
});
评论