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

User · Answer

You can just use    lt input type  radio  checked   gt    Using just the attribute checked without stating a value is the same as checked  checked

User · Answer

For anyone looking for an Angular2  2 4 8  solution  since this is a generically-popular question when searching    lt div  ngFor  let choice of choices  gt     lt input type  radio   checked   choice    defaultChoice  gt   lt  div gt    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

User · Answer

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    lt input type  radio  name  group  ng-model  mValue  value  first    gt First  lt input type  radio  name  group  ng-model  mValue  value  second    gt  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

User · Answer

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        lt p gt Option One   Html RadioButton  options    option1   true   lt  p gt         true will set it checked        lt p gt Option Two   Html RadioButton  options    option2    lt  p gt         nothing will leave it unchecked

User · Answer

You can use the checked attribute for this    lt input type  radio  checked  checked  gt

User · Answer

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    lt label gt Male lt  label gt     lt input    type  radio     name  gender     defaultChecked  this props gender     0      gt       lt label gt Female lt  label gt    lt input    type  radio     name  gender     defaultChecked  this props gender     1      gt

User · Answer

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   lt input id  d man  value  M  ng-disabled  some Value  type  radio  ng-checked  true  gt Man  the checked  checked  did not work for me

User · Answer

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    lt input type  radio  name  gender  value  male  required  lt  php echo  checked     gt   gt   lt input type  radio  name  gender  value  female  required   gt    This will makes the  male  radio button checked    lt input type  radio  name  gender  value  male   lt  php echo  checked     gt   gt   lt input type  radio  name  gender  value  female    gt

[html] Assign an initial value to radio button as checked

Examples related to html

Examples related to radio-button