10

我想检查多个单选按钮，所有单选按钮名称相同但 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>
4

6 回答 6

16

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

于 2012-06-05T10:07:25.523 回答
12

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

http://jsfiddle.net/8qB56/

但是看看您要做什么，更改每个逻辑问题的输入名称更适合您，因为您正在使用看起来像单个表单的内容。

因此，也许您可​​以更改name="q11[]"为name="q11[proactivity]"主动性问题输入、name="q11[service]"服务问题输入和name="q11[provision]"供应问题输入。

这样做将允许来自这些输入的所有选定响应保留在服务器端的 q11 字段中，然后您可以根据需要按摩数据（我假设 q11 代表“问题 11”或其他东西，这就是为什么您是所以坚持为所有这些输入保持相同的名称）。

于 2013-01-30T17:51:13.050 回答
5

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

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

于 2012-06-05T10:18:02.883 回答
3

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

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

于 2012-06-05T10:10:08.470 回答
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");
});
于 2014-05-17T07:06:46.443 回答
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]">

于 2015-12-11T12:22:27.827 回答