javascript - Radio button html missing checked attribute, though Firebug indicates it is checked - Stack Overflow

admin管理员组

文章数量:1336408

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

Share Improve this question Follow edited Mar 12, 2022 at 12:28 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 27, 2012 at 16:33 m27m27 7911 silver badge99 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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"]')

本文标签：