How to set a default radio button with a value?

Question

General issue: I cannot set a default radio button in my radio groups unless I remove the value attribute from the inputs.

Specifics: Each input has a value that is needed as it is being used by angular in other places in the app. So, I need to know how to set an input to default checked while retaining the values on the inputs. It has the same behavior if I try to add checked with jQuery instead of in HTML.

I have looked at several related questions including here. The specific issue is I need to have values and be able to set one input to checked as a default. The first input is set to checked, but it does not actually work unless I remove the value from that input.

Here is the HTML:

<div class="radio">
   <label>
        <input type="radio" ng-model="optionsRadios" id="new" value="new" checked>
        New
   </label>

   <label>
        <input type="radio" ng-model="optionsRadios" id="used" value="used">
        Used
   </label>

   <label >
         <input type="radio" ng-model="optionsRadios" id="broken" value="broken">
         Broken
   </label>
</div>

Your radio buttons need to have names. That's how the browser knows which buttons are part of the same group. — Barmar, Jun 30 '16 at 00:34
The default button is checked when I try it: https://jsfiddle.net/barmar/pp56rr6f/ — Barmar, Jun 30 '16 at 00:35
I don't need names, this is being handled by ng-model. As I said, the default checked property works if I simply remove the value attr. However, I NEED the value attr. — Mindi Torrey, Jun 30 '16 at 00:39

score 2 · Accepted Answer · answered Jun 30 '16 at 00:36

2

You have to use ng-checked="true" instead of checked

<input type="radio" ng-model="optionsRadios" id="new" value="new" ng-checked="true">

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>My cars:</p>
<input type="radio" ng-model="all" value="Volvo" ng-checked="true">Volvo<br>
<input type="radio" ng-model="all" value="Ford">Ford<br>
<input type="radio" ng-model="all" value="Mercedes">Mercedes
</body>
</html>

answered Jun 30 '16 at 00:36

MeTe-30

2,512
2
21
30

THANK YOU. This is it! I should have known it was an angular directive! – Mindi Torrey Jun 30 '16 at 00:42
Reason why only directive is working is, angular need to keep JS variables and html `checked` tag in sync – f7o Jun 30 '16 at 00:59

score 1 · Answer 2 · answered Jun 30 '16 at 00:50

If you have a group of radio button and you want to set radio button checked based on model, then radio button which has same value and ng-model is checked automatically.

<input type="radio"
ng-model="optionsRadio" value="1" >
<input type="radio"
ng-model="optionsRadio" value="2" >
<input type="radio"
ng-model="optionsRadio" value="3" >

If the value of optionsRadio is "2" then second radio button will be selected automatically.

In Your Case: When u r initiating the controller all u have to do is to assign a value to your model to keep atleast one radio button selected.

Controller part:

$scope.optionsRadio = "new";

Form part:

<input type="radio" ng-model="optionsRadio" value="new" >
<input type="radio" ng-model="optionsRadio" value="used" >
<input type="radio" ng-model="optionsRadio" value="broken" >

First radio button will be selected automatically.

Note: If value doesn't work u can use ng-value.

How to set a default radio button with a value?

2 Answers2