JQuery: get radio button value

Question

I have the following HTML:

HTML:

<input type="radio" name="abc" value="0" selected="selected" style="display:none" />
<input type="radio" name="abc" value="1" />1+
<input type="radio" name="abc" value="2" />2+
<input type="radio" name="abc" value="3" />3+

JQuery to get the selected radio button

$('input:radio[name=abc]:checked').val();

Why doesn't the code above work on page load, BEFORE a user selected a radio button? It's strange because the code above does work AFTER a user selected a radio button.

It seems to me that I have set the default radio button value to be 0, but if you

Meaning, if the radio button value is selected, return the selected value - otherwise, return 0 (when no value has been selected)

@StaceyH This is the fourth time you've asked this question. Please edit a previous question if you need to clarify it. — lonesomeday, Nov 09 '10 at 22:46
possible duplicate of [JQuery: How to determine if a radio button has been selected?](http://stackoverflow.com/questions/4139165/jquery-how-to-determine-if-a-radio-button-has-been-selected) — lonesomeday, Nov 09 '10 at 22:46
@StaceyH: because *that* way the jQuery would run on the document's (DOM's) 'ready' event, as opposed to running as the browser encounters the jQuery/JavaScript (which would be before it constructs the DOM, and so *before* the elements you want to manipulate **exist** - assuming you've put your ` — David Thomas, Nov 09 '10 at 22:55
Stacey, Javascript will execute before the DOM (Document Object Model) is ready...meaning that the elements (in this case, the radios inputs) don't exist yet. The event observation of $(document).ready() lets Javascript know to execute when the DOM has become available. — M.W. Felker, Nov 09 '10 at 22:55
@StaceyH You posted 3 very similar questions in the last 1 hour. You don't have to do that. You can just edit your original question to add new information, for example, a follow-up question... — Šime Vidas, Nov 09 '10 at 22:55

score 23 · Answer 1 · answered Nov 09 '10 at 22:45

23

You are using the wrong attribute. For radio buttons you have to use the checked attribute and not the selected attribute.

<input type="radio" checked="checked">

or just:

<input type="radio" checked>

answered Nov 09 '10 at 22:45

Šime Vidas

182,163
62
281
385

@StaceyH, you should do as @Šime suggests, and change `selected` to `checked`. @jnpcl, perhaps a little too harsh; I don't think @StaceyH is being *intentionally* obtuse. – David Thomas Nov 09 '10 at 22:52
@David: Read @lonesomeday's first comment on the initial question. – drudge Nov 09 '10 at 23:10
Tried your wisdom with OP's original JQuery: $('input:radio[name=abc]:checked').val(); and it worked! @Ashish Babu I tried your JQuery and I couldn't get it to work. – allegory Mar 11 '17 at 18:28

score 20 · Answer 2 · answered Aug 26 '13 at 08:51

First correct the attribute to checked and remove selected attribute which is wrong and then use the following code. t will get the selected value of the radiobutton at button click. ex for list

   $("#btn").click(function() {
        $('input[type="radio"]:checked').val();
        });

score 8 · Answer 3 · answered Nov 09 '10 at 22:45

Radio has the attribute checked, not selected

<input type="radio" name="abc" value="0" checked="checked" style="display:none" />
<input type="radio" name="abc" value="1" />1+
<input type="radio" name="abc" value="2" />2+
<input type="radio" name="abc" value="3" />3+

JQuery: get radio button value

3 Answers3

Linked