Summary of problem statement: Radio button html on the browser does not display the checked attribute, but Firebug indicates that the radio's checked attribute is set as checked.

Tested on

Broswer: FF 3.6.18 and IE8
jQuery: 1.5
MVC3 (Razor)

Details

Using MVC3 (with Razor) I'm rendering the following radio buttons from the server. The desired functionality is that on checking one radio, the other should be unchecked and vice-versa. In other words, the user is allowed to only select one option - say val1 or val2.

<div id="myRadioList">
    <div>
        <input type="radio" value="val1" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val1" checked="checked">
        
    </div>
    <div>
        <input type="radio" value="val2" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val2">
    </div>
</div>

What I'm observing is that if the user toggles the radio selected, the newly selected radio (let's say myRadioName_val2) is shown to be checked using firebug but the html still reflects the other radio button as checked. Because of this, some other validations are failing.

I've tried literally removing all checked attributes of both the radio buttons and then just check the one that's clicked.

This is what I'm doing to set the currently clicked radio, that is not working:

$("#myRadioList > div > input[value='myRadioName_val2]').attr('checked', 'checked');

I'm simplifying my code to avoid posting unnecessary details.

Summary of problem statement: Radio button html on the browser does not display the checked attribute, but Firebug indicates that the radio's checked attribute is set as checked.

Tested on

Broswer: FF 3.6.18 and IE8
jQuery: 1.5
MVC3 (Razor)

Details

Using MVC3 (with Razor) I'm rendering the following radio buttons from the server. The desired functionality is that on checking one radio, the other should be unchecked and vice-versa. In other words, the user is allowed to only select one option - say val1 or val2.

<div id="myRadioList">
    <div>
        <input type="radio" value="val1" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val1" checked="checked">
        
    </div>
    <div>
        <input type="radio" value="val2" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val2">
    </div>
</div>

What I'm observing is that if the user toggles the radio selected, the newly selected radio (let's say myRadioName_val2) is shown to be checked using firebug but the html still reflects the other radio button as checked. Because of this, some other validations are failing.

I've tried literally removing all checked attributes of both the radio buttons and then just check the one that's clicked.

This is what I'm doing to set the currently clicked radio, that is not working:

$("#myRadioList > div > input[value='myRadioName_val2]').attr('checked', 'checked');

I'm simplifying my code to avoid posting unnecessary details.

• javascript
• jquery
• jquery-events

• 1 selector has quote mismatch and you won't likely see the html change, use prop() method – charlietfl Commented Feb 27, 2012 at 16:50

3 Answers 3

The checked attribute in HTML is the default value. The checked property in JavaScript refers to the current state of the radio button.

Generally, it's best to let the browser handle the checked state of radio buttons and checkboxes rather than setting it yourself, otherwise you run into these kinds of problems. It's safe to get the current state via prop("checked") as already suggested, or through .is(":checked").

You may also want to consider using syntax like $('#myRadioList').find('input[value="myRadioName_val2"]') or better yet, $('#myRadioName_val2'), as child selectors in jQuery can be rather slow, since they are read right to left.

You should use

$("#myRadioList > div > input[value=myRadioName_val2]").prop('checked', true);

Well, you do have a syntax error withing the jQuery selector. It should be:

$('#myRadioList > div > input[value="myRadioName_val2"]')