Get group radio button selected value via jquery

Question

How can I get the selected radio button value via jQuery? I tried:

var selectedPlan = $("input[name=Plan[packageId]]:checked'").val();
alert(selectedPlan);

bBt didn't work.

<td style="vertical-align: top;">
    <input type="radio" value="1" name="Plan[packageId]">
    <lable>3 Games</lable><br>

    <input type="radio" value="2" name="Plan[packageId]">
    <lable>5 Games</lable><br>

    <input type="radio" value="3" name="Plan[packageId]">
    <lable>10 Games</lable><br>
</td>

here is the fiddle http://jsfiddle.net/vk3z45an/

Open your console : `Uncaught Error: Syntax error, unrecognized expression: input[name=Plan[packageId]]:checked' ` — Jeremy Thille, May 21 '15 at 07:03
There plenty of suggestions on this one: http://stackoverflow.com/questions/596351/how-can-i-get-which-radio-is-selected-via-jquery — Jobst, May 21 '15 at 07:06

Rory McCrossan · Answer 1 · 2015-05-21T07:11:58.673

2

You need to escape the [] characters in the name attribute of the selector (or wrap them in quotes) and remove the un-matched apostrophe at the end. Try this:

var selectedPlan = $("input[name=Plan\\[packageId\\]]:checked").val();
alert(selectedPlan);

// alternatively:
// var selectedPlan = $("input[name='Plan[packageId]']:checked").val();

Updated fiddle

Note that you're running your code on load of the page and your HTML has no radio selected by default. I added a checked attribute to one of the radios so you can see it working. Also, your original fiddle did not include jQuery so I added that too. Finally, the element is label, not lable.

edited May 21 '15 at 07:11

answered May 21 '15 at 07:04

Rory McCrossan

331,213
40
305
339

Also, run this on `radio` `click` – Tushar May 21 '15 at 07:05
@Rory can u please create a js fiddle ? it doesnt work for me. – dev1234 May 21 '15 at 07:05
tnx, can u add the checked via jquery, without setting the html checked="true" pls – dev1234 May 21 '15 at 07:09
1

That depends on how you want to find the radio to set as checked. Have a search for it as there's hundred of answers on how to do that already. – Rory McCrossan May 21 '15 at 07:10

Milind Anantwar · Accepted Answer · 2015-05-21T07:11:48.013

2

You need to escape the CSS meta characters or wrap them in quote for preventing the selector from breaking:

var selectedPlan = $("input[name='Plan[packageId]']:checked").val();

Working Demo

edited May 21 '15 at 07:11

answered May 21 '15 at 07:05

Milind Anantwar

81,290
25
94
125

can u also edit the script to load the page by selecting a default value. the third item as default please. – dev1234 May 21 '15 at 07:07
1

using jquery `$("input[name='Plan[packageId]']:eq(2)").prop('checked',true)` http://jsfiddle.net/xzkgfL3h/ – Milind Anantwar May 21 '15 at 07:10

Get group radio button selected value via jquery

2 Answers2