Html 如何检查多个单选按钮，具有相同名称的单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10895331/
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
How to check multiple radio button, radio buttons having same name?
提问by Symfony
I want to check multiple radio buttons, all radio buttons having same name but different ids.
我想检查多个单选按钮，所有单选按钮的名称相同但 ID 不同。
Here is my html code,
这是我的html代码，
<span style="float:left;margin:0 0 0 10px">Proactivity</span>
<label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Proactivity > Poor" name="q11[]">Poor</label>
<label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Proactivity > Good" name="q11[]">Good</label>
<br/><br/>
<span style="float:left;margin:0 0 0 10px">Service/support</span>
<label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Service/support > Poor" name="q11[]">Poor</label>
<label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Service/support > Good" name="q11[]">Good</label>
<br/><br/>
<span style="float:left;margin:0 0 0 10px">Provision of <br />specialist skills</span>
<label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Provision of specialist skills > Poor" name="q11[]">Poor</label>
<label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Provision of specialist skills > Good" name="q11[]">Good</label>
回答by Florian Margaine
You can't. Radio buttons are there for a single choice. For multiple choices, you need checkboxes.
你不能。单选按钮用于单一选择。对于多项选择，您需要复选框。
回答by Andrew Ho
Wrapping your radio buttons in the form tag will allow for groups of radio buttons with the same name to function independently from each other.
将单选按钮包装在表单标签中将允许具有相同名称的单选按钮组彼此独立运行。
But looking at what you are trying to do, it is more appropriate for you to change the input name of each logical question, since you are working with what looks like a single form.
但是看看您正在尝试做什么，更适合您更改每个逻辑问题的输入名称，因为您正在使用看起来像单个表单的内容。
So perhaps you can change name="q11[]"to name="q11[proactivity]"for the proactivity question inputs, name="q11[service]"for the service question inputs, and name="q11[provision]"for the provision question inputs.
因此，也许你可以改变name="q11[]"到name="q11[proactivity]"的积极性问题的投入，name="q11[service]"对服务问题的投入，并name="q11[provision]"为提供问题的投入。
Doing this will allow all the selected responses from these inputs to stay in the q11 field on the server side, you can then massage the data however you want (I'm assuming q11 stands for "question 11" or something so that's why you are so insistant on keeping the same name for all these inputs).
这样做将允许来自这些输入的所有选定响应保留在服务器端的 q11 字段中，然后您可以根据需要对数据进行按摩（我假设 q11 代表“问题 11”或其他内容，这就是为什么您所以坚持为所有这些输入保持相同的名称）。
回答by Dipak
When you use same name for all radio input they all fall in one group. It won't allow you to make separate actions.
当您对所有收音机输入使用相同的名称时，它们都属于一组。它不允许您进行单独的操作。
You have to use different names for each radio group
您必须为每个广播组使用不同的名称
回答by Tepken Vannkorn
Using radio buttons to select multiple items seems against the usability rule. If you do, you can provide different name for them.
使用单选按钮选择多个项目似乎违反了可用性规则。如果这样做，您可以为它们提供不同的名称。
PS: you should provide an external style sheet for every radio button. It'll be great if you want to make an adjustment later.
PS：您应该为每个单选按钮提供一个外部样式表。如果您想稍后进行调整，那就太好了。
回答by Sam
It works pls follow the link
它有效，请点击链接
http://jsfiddle.net/Cwalkdawg/3CxLD/2/
Since you insist using radios, I would go with a jQuery library to get your values. You can add a class to your radios and it will allow you to select that class and iterate through it. It's counter-intuitive and dirty, but it will work. This markup:
由于您坚持使用收音机，我会使用 jQuery 库来获取您的值。您可以向收音机添加一个类，它允许您选择该类并对其进行迭代。这是违反直觉和肮脏的，但它会起作用。这个标记：
<input type="radio" class="rad" name="None" value="--" />None
<br />
<input type="radio" class="rad" name="Item1" value="Item1" />Item1
<br />
<input type="radio" class="rad" name="Item2" value="Item2" />Item2
<br />
<input type="radio" class="rad" name="Item3" value="Item3" />Item3
<br />
<input type="radio" class="rad" name="Item4" value="Item4" />Item4
<br />
Goes with this jQuery:
与此 jQuery 一起使用：
$(document).ready(function () {
$("#button").click(function () {
// Radios
$(".rad:checked").each(function() {
console.log("Radio: " + $(this).val());
});
});
})
In the fiddle, I added checkboxes too, just to show you how much more easy it is i.e. the following markup (which reads easier and is not as ambiguous):
在小提琴中，我也添加了复选框，只是为了向您展示它有多容易，即以下标记（读起来更容易并且不那么模棱两可）：
<input name="choices" type="checkbox" value="something1" />Option 1
<br />
<input name="choices" type="checkbox" value="something2" />Option 2
<br />
<input name="choices" type="checkbox" value="something3" />Option 3
<br />
<input name="choices" type="checkbox" value="something4" />Option 4
<br />
Goes with this jQuery:
与此 jQuery 一起使用：
$("#button").click(function () {
//Check boxes
$("input:checkbox[name=choices]:checked").each(function() {
console.log("Checkbox: " + $(this).val());
});
});
You can't deselect a radio button unless you want to deselect all of them using either a reset element, which will reset your entire form, or creating a custom function just for radios (that would clear all the choices anyway).
您不能取消选择一个单选按钮，除非您想使用重置元素取消选择所有这些按钮，这将重置您的整个表单，或者为收音机创建一个自定义功能（无论如何都会清除所有选择）。
The deselect could be routed to your name=None radio button with the following code:
可以使用以下代码将取消选择路由到您的 name=None 单选按钮：
$(".rad[name=None]").click(function() {
$(".rad").removeAttr("checked");
});
回答by Paolo Torasso
You can also put a number (a counter if you use js) inside your name-array like this:
您还可以在名称数组中放置一个数字（如果使用 js，则为计数器），如下所示：
Proactivity:
<input type="radio" name="myradio[0]"><input type="radio" name="myradio[0]">
主动性：
<input type="radio" name="myradio[0]"><input type="radio" name="myradio[0]">
Service/support:
<input type="radio" name="myradio[1]"><input type="radio" name="myradio[1]">
服务支持：
<input type="radio" name="myradio[1]"><input type="radio" name="myradio[1]">
Provision of
specialist skills:
<input type="radio" name="myradio[2]"><input type="radio" name="myradio[2]">
提供
专业技能：
<input type="radio" name="myradio[2]"><input type="radio" name="myradio[2]">
