jQuery 仅从三个具有相同名称的复选框中选择一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14918011/
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
Select only one checkbox out of three with same name
提问by Alex Zahir
UPDATE:
更新：
My code now is something like this: (works).
我的代码现在是这样的：（有效）。
$(document).ready(function(){
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
});
});
HTML:
HTML：
<input type="checkbox" name="swimming" class="chb" />
<input type="checkbox" name="swimming" class="chb" />
<input type="checkbox" name="swimming" class="chb" />
I have a questionnaire type form with three checkboxes for each question and I want the user to be able to select only one out of the three.
我有一个问卷类型的表单，每个问题都有三个复选框，我希望用户只能选择三个中的一个。
My HTML is something like this:
我的 HTML 是这样的：
Question 1:
问题 1：
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
Question 2:
问题2：
<input type="checkbox" name="swimming" />
<input type="checkbox" name="swimming" />
<input type="checkbox" name="swimming" />
But this allows the user to select all checkboxes for a particular question. And I want it to be able to select only one out of the three. Is there a solution to this?
但这允许用户选择特定问题的所有复选框。我希望它只能从三个中选择一个。这个问题有方法解决吗？
Thanks
谢谢
回答by Exception
Demohere
演示在这里
$(':checkbox').on('change',function(){
var th = $(this), name = th.attr('name');
if(th.is(':checked')){
$(':checkbox[name="' + name + '"]').not(th).prop('checked',false);
}
});
As per the comment, I assume user must be able to select one out of first three and 1 out of second three checkboxes. Because name attributes are different. Hereis demo.
根据评论，我假设用户必须能够从前三个复选框中选择一个，从后三个复选框中选择一个。因为名称属性不同。这是演示。
$("input:checkbox").change(function(){
var group = ":checkbox[name='"+ $(this).attr("name") + "']";
if($(this).is(':checked')){
$(group).not($(this)).attr("checked",false);
}
});
回答by rcarvalhoxavier
You can try using a div.
您可以尝试使用 div。
<div id="checkboxGroup">
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
</div>
$('#checkboxGroup input[type=checkbox]').change(function() {
if (this.checked) {
$('#checkboxGroup input[type=checkbox]').not(
$(this)).prop('checked', false);
}
});
see the fiddle
看小提琴
回答by lavapj
Radio buttons are the way to go. You can also preselect one of the options if you want by adding the word "checked" as an attribute within that input tag.
单选按钮是要走的路。如果需要，您还可以通过在该输入标记中添加“已检查”一词作为属性来预选其中一个选项。
<input type="radio" name="ballet" value="1" checked />
<input type="radio" name="ballet" value="2" />
<input type="radio" name="ballet" value="3" />
回答by Paul Mendoza
This is called an HTML radio button. Radio buttons are grouped together and the concept of a radio button is that only one at a time in a group can be selected.
这称为 HTML 单选按钮。单选按钮组合在一起，单选按钮的概念是一次只能选择一个组中的一个。
The nameattribute is the name of the group of radio buttons.
的名称属性是组单选按钮的名称。
<input type="radio" name="ballet" value="1" />
<input type="radio" name="ballet" value="2" />
<input type="radio" name="ballet" value="3" />
Checkboxes with groups like radio buttons
带有单选按钮等组的复选框
Notice that "x" is the class but that the "name" attribute is the group just like you've wanted.
请注意，“x”是类，但“名称”属性是您想要的组。
$(".x").click( function() {
var n = $(this).attr('name');
$("[name=" + n + ']').prop("checked", false);
$(this).prop("checked", true);
});
<input type="checkbox" name="swimming" class="x" />
<input type="checkbox" name="swimming" class="x" />
<input type="checkbox" name="swimming" class="x" />
<br/>
<input type="checkbox" name="diving" class="x" />
<input type="checkbox" name="diving" class="x" />
<input type="checkbox" name="diving" class="x" />
回答by Muhammad Talha Akbar
For Checkboxes:
对于复选框：
$("input:checkbox").click(function () {
$("[name="+$(this).prop('name')+"]").prop("checked", false);
$(this).prop("checked", true);
});
You can use radios instead.
您可以改用收音机。
