如何检查多个单选按钮，同名单选按钮？

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>

6 个解决方案

#1

You can't. Radio buttons are there for a single choice. For multiple choices, you need checkboxes.

你不能。单选按钮可供选择。对于多种选择,您需要复选框。

#2

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.

在表单标签中包装单选按钮将允许具有相同名称的单选按钮组彼此独立运行。

http://jsfiddle.net/8qB56/

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”或类似的东西,这就是为什么你是如此坚持为所有这些输入保持相同的名称)。

#3

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

您必须为每个无线电组使用不同的名称

#4

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:你应该为每个单选按钮提供一个外部样式表。如果您想稍后进行调整,那将会非常棒。

#5

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");
});

#6

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

主动性:

Service/support: <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]">

提供专业技能: