如何在html中为无线电组列表命名无线电?

时间:2012-04-25 13:10:01

标签: javascript jquery html

我希望它会发出一份颜色列表。在html中,如果输入是列表,它们应该是同名,但是同名的无线电输入,它们将在同一组中,那么如何分隔每个无线电组,但是所有组仍然具有相同的名称,那么我可以使用循环去获取服务器端列表的所有值?

此外,在客户端,我需要检查每个组是否被选中,所以如何使用javascript或jquery来选择所有的无线电组,而不是所有的单选按钮。

<form method="post">
Car A: <input type="radio" name="color[]"/>red <input type="radio" name="color[]"/>yello<br/>
Car B: <input type="radio" name="color[]"/>red <input type="radio" name="color[]"/>yello<br/>
Car C: <input type="radio" name="color[]"/>red <input type="radio" name="color[]"/>yello<br/>
<input type="submit"/>
</form>

2 个答案:

答案 0 :(得分:5)

每个组的所有单选按钮都应该有不同的名称。

Car A: 
<input type="radio" name="color1"/>red 
<input type="radio" name="color1"/>yello<br/>

Car B: 
<input type="radio" name="color2"/>red 
<input type="radio" name="color2"/>yello<br/>

Car C: 
<input type="radio" name="color3"/>red 
<input type="radio" name="color3"/>yello<br/>

检查是否已选择所有组:

if ($('input[type="radio"]:checked').length == 3)
    validAction();
else
    invalidAction();

您可以将选择器限制为仅name属性以color开头的元素:

if ($('input[type="radio"][name^="color"]:checked').length == 3)

答案 1 :(得分:1)

组中的每个成员必须具有相同的名称。每个组都必须有不同的名称。

如果您希望迎合PHP的命名约定以在循环中呈现数据,那么对第一个组使用约定:group[0],然后对第二个组使用group[1],依此类推。这会在客户端上为您提供唯一的名称,而PHP会将它们合并到一个数组中。

在客户端,您可以执行以下操作:

var i = 0, myform = /* something */;
while (myform.elements['group[' + i + ']']) {
    var group = myform.elements['group[' + i + ']'];
    /* Loop over HTML Element Collection to make sure one item is `checked`. */
}