How to check the radio button by default

Question

Here is my radio button.

<input type="radio" id="MyRadio" value=1>
<input type="radio" id="MyRadio" value=2>
<input type="radio" id="MyRadio" value=3>

In the script i want to check the third radio button

$('#MyRadio').attr('checked',true); but it is not checking any radio button.

var target = '3';

How can i check the radio button with the id="MyRadio" and with value=3 ?

@Saty Yes, that was the type in the question. I now corrected. How can i do that .. ?\ — AngularAngularAngular, Jul 14 '15 at 06:37
an Id should ALWAYS be unique. Please use "name" instead http://stackoverflow.com/questions/8305953/two-radio-buttons-share-one-id — SpongePablo, Jul 14 '15 at 06:38

score 1 · Answer 1 · answered Jul 14 '15 at 06:40

Firstly id should be unique so change your id to class instead.

So HTML becomes:

<input type="radio" class="MyRadio" value=1>
<input type="radio" class="MyRadio" value=2>
<input type="radio" class="MyRadio" value=3>

Using Jquery > 1.9

$(".MyRadio:radio[value=3]").prop("checked", true)

See the fiddle: http://jsfiddle.net/y6s31h8d/

score 0 · Accepted Answer · 2015-07-14T06:40:16.917

http://api.jquery.com/prop/

Concerning boolean attributes, consider a DOM element defined by the HTML markup , and assume it is in a JavaScript variable named elem:

elem.checked    true (Boolean) Will change with checkbox state
$( elem ).prop( "checked" )     true (Boolean) Will change with checkbox state
elem.getAttribute( "checked" )  "checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6)   "checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6.1+)    "checked" (String) Will change with checkbox state
$( elem ).attr( "checked" ) (pre-1.6)   true (Boolean) Changed with checkbox state

CORRECT:

<input type="radio" id="MyRadio3" value=3>
$("MyRadio3").checked

It doesnt make sense if you name 3 elements the same id. You rather should use classes.

God, I wanted to do it in `JQuery` not directly giving the `checked` attribute — AngularAngularAngular, Jul 14 '15 at 06:35

score 0 · Answer 3 · edited Jul 14 '15 at 06:39

0

$('#MyRadio').val(3); it should work

edited Jul 14 '15 at 06:39

Abdulla Nilam

36,589
17
64
85

answered Jul 14 '15 at 06:38

Zohaib

588
1
6
23

how does this check anything? – Félix Adriyel Gagnon-Grenier Jul 14 '15 at 16:56

score 0 · Answer 4 · answered Jul 14 '15 at 06:39

You missed a "

try this following code

<input type="radio" id="MyRadio1" value=1>
<input type="radio" id="MyRadio2" value=2>
<input type="radio" id="MyRadio3" value=3>
                  ^




$("#MyRadio3").attr('checked', 'checked');

Change it from "true" to "checked."

For jQuery 1.9 or higher use: (possible since 1.6)

$("#MyRadio3").prop("checked", true)

score 0 · Answer 5 · answered Jul 14 '15 at 06:39

0

$('input[name=type][value=2]').prop('checked', 'checked');

You can try this to checked radio button based on its value.

answered Jul 14 '15 at 06:39

Shashikant Chauhan

444
4
13

score 0 · Answer 6 · answered Jul 14 '15 at 06:43

0

Please try this. Just give a name attribute to your radio buttons.

$('input:radio[name="MyRadio"]').filter('[value="3"]').attr('checked', true);

answered Jul 14 '15 at 06:43

Riken Shah

87
10

score 0 · Answer 7 · answered Jul 14 '15 at 06:46

First off you're missing a quote after you set the type to radio. Second issue is using the same ID on multiple elements, a class is better suited for that job.

The javascript should be along the lines of this:

$('.MyRadio').eq(2).attr('checked', true)

First is the selector using the class name, Second is the eq function which gets the element by its index from the array. Third is setting the checked attribute just as you had done :).

https://jsfiddle.net/un5pfee2/

How to check the radio button by default

7 Answers7