How to select a radio button by default?

Question

I have some radio buttons and I want one of them to be set as selected by default when the page is loaded. How can I do that?

<input type="radio" name="imgsel"  value=""  />

score 1397 · Accepted Answer · edited Apr 07 '16 at 15:46

1397

XHTML solution:

<input type="radio" name="imgsel" value="" checked="checked" />

Please note, that the actual value of checked attribute does not actually matter; it's just a convention to assign "checked". Most importantly, strings like "true" or "false" don't have any special meaning.

If you don't aim for XHTML conformance, you can simplify the code to:

<input type="radio" name="imgsel" value="" checked>

edited Apr 07 '16 at 15:46

cubuspl42

7,833
4
41
65

answered Apr 08 '11 at 08:19

Shakti Singh

84,385
21
134
153

2

Duplicate of http://stackoverflow.com/questions/4711036/assign-an-initial-value-to-radio-button-as-checked – RPB Oct 19 '14 at 15:44
115

It is just as important to know the gotcha with this: You need to make sure NO other inputs in this radio button group contain the markup checked="false", nor "checked" by itself. Otherwise, the last one of these that appears on the page will be checked. Only the one you want selected by default should have any markup that contains "checked". – nfriend21 Dec 14 '14 at 16:33
5

If the problem persists, you should add the attribute **autocomplete="off"** to force the browser to set the default value. – J.BizMai Jan 05 '18 at 13:31
2

"Empty attribute" (still) valid in the current [HTML 5.2 recommendation](https://www.w3.org/TR/2017/REC-html52-20171214/syntax.html#elements-attributes). – handle Apr 05 '18 at 17:09
1

which is better checked="checked" or just checked? – OMNIA Design and Marketing Apr 13 '19 at 01:16
1

@OMNIADesignandMarketing `checked="checked"` is better, because, it is accepted in both HTML and XHTML. And it looks better than empty `checked` attribute! – mahfuz Dec 07 '20 at 07:25

mdm · Answer 2 · 2015-02-12T10:14:03.537

129

Use the checked attribute.

<input type="radio" name="imgsel"  value="" checked />

or

<input type="radio" name="imgsel"  value="" checked="checked" />

edited Feb 12 '15 at 10:14

answered Apr 08 '11 at 08:19

mdm

12,480
5
34
53

16

`` also causes the button to be checked. – FutureNerd Apr 10 '14 at 05:11
46

I suggest only using `checked` or `checked="checked"` and **vehemently** avoid using "true" as it implies that "false" will do the opposite... which it doesn't. – Ryan Wheale Nov 10 '14 at 19:18
5

The first choice is the right answer. Boolean attributes should not have values. – nucleartide Feb 11 '15 at 18:37
5

@JasonTu Both are correct. XHTML requires the second version, while HTML allows for either. – triunenature May 09 '15 at 07:56
2

does that mean that checked="checked" is better? – OMNIA Design and Marketing Apr 13 '19 at 01:17
1

No, just that it's more backward compatible. But XHTML is sorta dead anyway... – Stijn de Witt Nov 02 '19 at 18:57

score 82 · Answer 3 · edited Jun 05 '19 at 14:20

82

This doesn't exactly answer the question but for anyone using AngularJS trying to achieve this, the answer is slightly different. And actually the normal answer won't work (at least it didn't for me).

Your html will look pretty similar to the normal radio button:

<input type='radio' name='group' ng-model='mValue' value='first' />First
<input type='radio' name='group' ng-model='mValue' value='second' /> Second

In your controller you'll have declared the mValue that is associated with the radio buttons. To have one of these radio buttons preselected, assign the $scope variable associated with the group to the desired input's value:

$scope.mValue="second"

This makes the "second" radio button selected on loading the page.

EDIT: Since AngularJS 2.x

The above approach does not work if you're using version 2.x and above. Instead use ng-checked attribute as follows:

<input type='radio' name='gender' ng-model='genderValue' value='male' ng-checked='genderValue === male'/>Male
<input type='radio' name='gender' ng-model='genderValue' value='female' ng-checked='genderValue === female'/> Female

edited Jun 05 '19 at 14:20

Yury Solovyov

526
8
18

answered Nov 24 '15 at 14:46

discodane

1,978
4
24
37

5

I was surprised that the accepted answer didn't work - until I read your comment. I too am using AngularJS, and this worked a treat! – James Jan 11 '16 at 19:24
1

In my case, also using angularjs, I had value but I had to change it to ng-value for it to work properly. – Elaine K Nov 27 '17 at 19:04
1

Ah yes. It should be noted that this is an answer for angular 1.x not greater – discodane Nov 27 '17 at 22:53
1

This answer should be deleted because this answer doesn't answer the question. – I am the Most Stupid Person Jun 10 '19 at 12:24
Yes I'm using AngularJS and previous answers not worked, I tried your second and it worked. – agileDev May 15 '20 at 18:49

score 30 · Answer 4 · edited Mar 10 '14 at 10:37

30

Add this attribute:

checked="checked"

edited Mar 10 '14 at 10:37

bluish

26,356
27
122
180

answered Apr 08 '11 at 08:20

Gerben Jacobs

4,515
3
34
56

score 19 · Answer 5 · answered Apr 08 '11 at 08:23

19

They pretty much got it there... just like a checkbox, all you have to do is add the attribute checked="checked" like so:

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

...and you got it.

Cheers!

answered Apr 08 '11 at 08:23

Rohjay

351
1
8

How to select a radio button by default?

5 Answers5

Linked

Related