CODEWITHSUNDEEP
javascriptjqueryhtml
CL So
CL So

Reputation: 3759

How to name radio for a list of radio group in html?

I expect it will send out a list of color. In html, if inputs are list, they should be same name, but same name of radio inputs, they will be in same group, so how to separate each radio group, but all group still have same name, then I can use loop go get all value of the list at server side?

Besides, at client side, I need to check whether each group is selected, so how to use javascript or jquery to select all radio groups, not all radio buttons.

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

Upvotes: 0

Views: 1003

Answers (2)

Quentin
Quentin

Reputation: 943163

Every member of a group must have the same name. Every group must have a different name.

If you want to pander to PHP's naming conventions for presenting data in a loop then use a convention such as: group[0] for the first group then group[1] for the second and so on. That gives you unique names on the client while PHP will merge them into an array.

On the client side you can do something along the lines of:

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`. */
}

Upvotes: 1

gdoron
gdoron

Reputation: 150253

Each group should have a different name for all of it's radio buttons.

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

Checking if all the groups were selected:

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

You can limit the selector to only elements which their name attributes begin with color:

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

Upvotes: 5

Related Questions