jQuery：取消选中其他复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17785010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: Uncheck other checkbox on one checked
提问by Code Lover
I am having total 6 checkbox ( may be add more in future ) and I want to allow only select one so when user checked any of them other should unchecked.
我总共有 6 个复选框（将来可能会添加更多），我想只允许选择一个，因此当用户选中其中任何一个时，其他应取消选中。
I tried with this code and works fine if I defined ID but now just wonder how to make it vice versa in efficient way so in future if I add more than it wont be a problem
我尝试使用此代码并且如果我定义了 ID 就可以正常工作，但现在只是想知道如何以有效的方式使其反之亦然，所以将来如果我添加的数量超过它不会有问题
$('#type1').click(function() {
$('#type2').not('#type1').removeAttr('checked');
});
FYI, checkboxs are not sibling and are in different <td>
仅供参考，复选框不是兄弟，而是不同的 <td>
回答by billyonecan
Bind a changehandler, then just uncheck all of the checkboxes, apart from the one checked:
绑定一个change处理程序，然后取消选中所有复选框，除了选中的复选框：
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});
Here's a fiddle
这是一把小提琴
回答by Sudhir Bastakoti
you could use class for all your checkboxes, and do:
您可以为所有复选框使用 class，然后执行以下操作：
$(".check_class").click(function() {
$(".check_class").attr("checked", false); //uncheck all checkboxes
$(this).attr("checked", true); //check the clicked one
});
回答by Amit
Try this
尝试这个
$(function() {
$('input[type="checkbox"]').bind('click',function() {
$('input[type="checkbox"]').not(this).prop("checked", false);
});
});
回答by Rahul Sharma
I wanted to add an answer if the checkboxes are being generated in a loop. For example if your structure is like this (Assuming you are using server side constructs on your View, like a foreachloop):
如果复选框是在循环中生成的，我想添加一个答案。例如，如果你的结构是这样的（假设你在你的 上使用服务器端构造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>
Corresponding Jquery:
对应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);
});
});
Working DEMO: https://jsfiddle.net/gr67qk20/
回答by rogieo
$('.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');
});
回答by Abhishek Jain
Try this
尝试这个
$("[id*='type']").click(
function () {
var isCheckboxChecked = this.checked;
$("[id*='type']").attr('checked', false);
this.checked = isCheckboxChecked;
});
To make it even more generic you can also find checkboxes by the common class implemented on them.
为了使其更加通用，您还可以通过在其上实现的公共类找到复选框。
Modified...
修改的...
回答by nubinub
I think the prop method is more convenient when it comes to boolean attribute. http://api.jquery.com/prop/
我认为 prop 方法在布尔属性方面更方便。 http://api.jquery.com/prop/
