如何检查多个单选按钮,具有相同名称的单选按钮?

时间:2012-06-05 10:06:18

标签: html radio-button

我想检查多个单选按钮,所有单选按钮具有相同的名称但不同的ID。

这是我的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 个答案:

答案 0 :(得分:15)

你做不到。单选按钮用于单选。对于多种选择,您需要复选框。

答案 1 :(得分:9)

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

http://jsfiddle.net/8qB56/

但是看看你想要做什么,更适合你改变每个逻辑问题的输入名称,因为你正在处理看似单一形式的东西。

因此,您可以针对主动提问输入更改name="q11[]"name="q11[proactivity]",针对服务问题输入更改name="q11[service]",并为提供问题输入更改name="q11[provision]"

执行此操作将允许来自这些输入的所有选定响应保留在服务器端的q11字段中,然后您可以根据需要按摩数据(我假设q11代表“问题11”或类似的东西为什么你如此坚持为所有这些输入保持相同的名称。)

答案 2 :(得分:3)

当您为所有无线电输入使用相同名称时,它们都属于一个组。它不允许您单独执行操作。

您必须为每个广播组使用不同的名称

答案 3 :(得分:2)

使用单选按钮选择多个项目似乎违反了可用性规则。如果这样做,您可以为它们提供不同的名称。

PS:你应该为每个单选按钮提供一个外部样式表。如果你想稍后进行调整,那就太好了。

答案 4 :(得分:1)

它的工作原理请点击链接

http://jsfiddle.net/Cwalkdawg/3CxLD/2/

由于您坚持使用无线电,我会使用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 />

使用这个jQuery:

$(document).ready(function () {
    $("#button").click(function () {
        // Radios
        $(".rad:checked").each(function() {
            console.log("Radio: " + $(this).val());
        });
    });
})

在小提琴中,我也添加了复选框,只是为了向您展示它是多么容易,即下面的标记(读取更容易,并且不那么模糊):

<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 />

使用这个jQuery:

$("#button").click(function () {
    //Check boxes
    $("input:checkbox[name=choices]:checked").each(function() {
        console.log("Checkbox: " + $(this).val());
    });
});

您不能取消选择单选按钮,除非您想使用重置元素取消选择所有这些按钮,这将重置整个表单,或者仅为无线电创建自定义功能(无论如何都会清除所有选项) )。

取消选择可以使用以下代码路由到您的name = None单选按钮:

$(".rad[name=None]").click(function() {
    $(".rad").removeAttr("checked");
});

答案 5 :(得分:0)

你也可以在你的名字数组中放一个数字(如果你使用js一个计数器),如下所示:

积极性: <input type="radio" name="myradio[0]"><input type="radio" name="myradio[0]">

服务/支持: <input type="radio" name="myradio[1]"><input type="radio" name="myradio[1]">

提供专业技能: <input type="radio" name="myradio[2]"><input type="radio" name="myradio[2]">