radio button default value inconsistencies

I am creating a survey. For my purposes, JS validation is fine, and I want to ensure that a radio button in each group is selected. By default, no radio buttons are selected. As I understand it, the user agent automatically sets the value to the first radio buttons value in that group. For example:

<input type="radio" name="question_1" value="1">
<input type="radio" name="question_1" value="2">
<input type="radio" name="question_1" value="3">

Although none are pre-selected(visually) I can check the value of this group:

$('input[name="question_1"]').val();

this will return "1", the value of the first radio button. This is making it hard for me to see a "group" with no value.

Now heres where it get's weird. When I am ready to post the data to my php script, 开发者_运维问答I grab it from the form like this:

$(pagesArray[currentPage]).children('form').serialize();

This grabs all of my form data nicely BUT doesn't return values for radio group that has no button checked. Why is it that I am not getting the value of the first button in the group when nothing is checked?

$('input[name="question_1"]').val();

Think about what this does. It selects all the elements that match the selector. This is all three elements. It then calls the val method, which gets the value property of the first one. (When you have multiple elements in a selection, the value of the first is returned.) Which (if any) element is checked is irrelevant: unselected elements still have a value property set.

$(pagesArray[currentPage]).children('form').serialize();

This, however, does very different logic. It looks at what fields the browser would send to the server. Since unchecked radio fields are not sent, they are not serialized.

So to quote from your question:

the user agent automatically sets the value to the first radio buttons value in that group

This is false. There is no one global input[name="question_1"] element that has a value set. There are multiple elements (none of which is selected) and you're just getting the value of the first.

To get the value of the radio button group you should use the :checked filter. Like

$('input[name="question_1"]:checked').val()

Example - jsFiddle

And serialize would only select successful controls as per the jQuery api, and a group of radio buttons with none checked is not successful

Excerpt:

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

The requirement for selecting the initial radio button in HTML 4 was never really well followed by all user agents, and was done away with in HTML5. I would manually check the first button in the list and have done with it.

http://css-tricks.com/5972-indeterminate-radio-buttons/