Assign an initial value to radio button as checked

Question

How do I assign the value of a radio button initially as checked in HTML?

Conformance

Answer 1

You can use the checked attribute for this:

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

Expediency

you can also just mention that attribute with no value assigned i.e.<input type="radio" checked> – Paviour

@Paviour I believe checked="checked" is the valid way to pre-check a radio button - just using "checked" isn't valid HTML (despite being supported by most browsers) – Kyleekylen

@matthewh - nah, you can use just "checked" on it's own and it is valid HTML (although not valid XHTML). Personally I prefer 'checked="checked"', but you don't have to use it ... indeed, there's quite a strong case against using it. – Konikow

Answer 2

You can just use:

<input type="radio" checked />

Using just the attribute checked without stating a value is the same as checked="checked".

Asthma

as @Matt Healey stated, using checked without the attribute is not valid HTML – Blankly

@Blankly incorrect. it is not valid Xhtml, however it is completely valid for HTML5 which is as global of a standard as anything will ever be. – Roofing

Answer 3

I've put this answer on a similar question that was marked as a duplicate of this question. The answer has helped a decent amount of people so I thought I'd add it here too in just in case.

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.

Keek

Indeed! The above answers don't work with Angular JS. Your answer resolved my issue. Thanks! :) – Challis

Answer 4

For anyone looking for an Angular2 (2.4.8) solution, since this is a generically-popular question when searching:

<div *ngFor="let choice of choices">
  <input type="radio" [checked]="choice == defaultChoice">
</div>

This will add the checked attribute to the input given the condition, but will add nothing if the condition fails.

Do not do this:

[attr.checked]="choice == defaultChoice"

because this will add the attribute checked="false" to every other input element.

Since the browser only looks for the presence of the checked attribute (the key), ignoring its value, so the last input in the group will be checked.

Condescendence

Answer 5

Note that if you have two radio button with same "name" attribute and they have "required" attribute, then adding "checked" attribute to them won't make them checked.

Example: This makes both radio button remain unchecked.

<input type="radio" name="gender" value="male" required <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" required />

This will makes the "male" radio button checked.

<input type="radio" name="gender" value="male" <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" />

Interlunar

Answer 6

The other way to set default checked on radio buttons, especially if you're using angularjs is setting the 'ng-checked' flag to "true" eg: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">Man

the checked="checked" did not work for me..

Sophiesophism

cause ng-checked="true" is from angularjs repertoire. – Ative

Or set the model value in the controller to "true". Watch out that you set it to a string, not a Boolean! – Mussorgsky

Answer 7

Im a bit late to the party and I know the OP said html, but if you needed to do this in MVC you can set true in the third param.

eg:

    <p>Option One :@Html.RadioButton("options", "option1", true})</p>
    // true will set it checked

     <p>Option Two :@Html.RadioButton("options", "option2"})</p>
     //nothing will leave it unchecked

Ulberto

Answer 8

If you are using react-redux for your application and if you want to show data which is in the redux store, you can set "checked" option as below.

<label>Male</label>

 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "0"}
 />



 <label>Female</label>
 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "1"}
 />

Lavonda

Answer 9

What worked for me, was assigning the same name attribute to the radio buttons as for the containing form tags, and the checked="checked" attribute for the default button, as shown below:

<form name="State" method="get" action="">
    <input type="radio" name="State" id="" value="" />
    <input type="radio" name="State" id="" value=""checked="checked"/>
    <input type="radio" name="State" id="" value="" />
    <input type="radio" name="State" id="" value="" />
</form>

In the example above, the second radio button will be checked when the page is loaded.

Alcaide

Answer 10

The initial "checked" property is only working, if not empty values are applied to all radio buttons:

<form>
    <input type="radio" name="myRadioGroup" value="1" >
    <input type="radio" name="myRadioGroup" value="2" checked >
    <input type="radio" name="myRadioGroup" value="3" >
    <input type="radio" name="myRadioGroup" value="4" >
</form>

Do not ask me why. But that solved that problem.

Stereophotography

Answer 11

In React or Next, do this.

<fieldset>
  <input  value='value' type="radio" name='myfield" defaultChecked />
  <input  value='value' type="radio" name='myfield" />
</fieldset>

Finney