Bootstrap radio button "checked" flag - html

Question

In case #1 works, in case #2 it do not works. Check the code bellow:
<div class="container">
<div class="row">
<h1>Radio Group #1</h1>
<label class="radio-inline">
<input name="radioGroup" id="radio1" value="option1" type="radio"> 1
</label>
<label class="radio-inline">
<input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2
</label>
<label class="radio-inline">
<input name="radioGroup" id="radio3" value="option3" type="radio"> 3
</label>
</div>
<div class="row">
<h1>Radio Group #2</h1>
<label for="year" class="control-label input-group">Year</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input name="year" value="2011" type="radio">2011
</label>
<label class="btn btn-default">
<input name="year" value="2012" type="radio">2012
</label>
<label class="btn btn-default">
<input name="year" value="2013" checked="checked" type="radio">2013
</label>
</div>
</div>
</div>
You can see it in action here: http://bootply.com/84165

Answer 1

Assuming you want a default button checked.
<div class="row">
<h1>Radio Group #2</h1>
<label for="year" class="control-label input-group">Year</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="year" value="2011">2011
</label>
<label class="btn btn-default">
<input type="radio" name="year" value="2012">2012
</label>
<label class="btn btn-default active">
<input type="radio" name="year" value="2013" checked="">2013
</label>
</div>
</div>
Add the active class to the button (label tag) you want defaulted and checked="" to its input tag so it gets submitted in the form by default.

Answer 2

A javascript fix to apply the 'active' class to all labels that are parents of checked inputs:
$(':input:checked').parent('.btn').addClass('active');
insert right after
$('.btn').button();

Answer 3

You have to use active in the label to make it work as mentioned above. But you can use checked="checked" and it will work too. It's not necessary but it's more legible and makes more sense as it is more html format compliance.

Answer 4

Use active class with label to make it auto select and use checked="" .
<label class="btn btn-primary active" value="regular" style="width:47%">
<input type="radio" name="service" checked="" > Regular </label>
<label class="btn btn-primary " value="express" style="width:46%">
<input type="radio" name="service"> Express </label>

Answer 5

In case you want to use bootstrap radio to check one of them depends on the result of your checked var in the .ts file.
component.html
<h1>Radio Group #1</h1>
<div class="btn-group btn-group-toggle" data-toggle="buttons" >
<label [ngClass]="checked ? 'active' : ''" class="btn btn-outline-secondary">
<input name="radio" id="radio1" value="option1" type="radio"> TRUE
</label>
<label [ngClass]="!checked ? 'active' : ''" class="btn btn-outline-secondary">
<input name="radio" id="radio2" value="option2" type="radio"> FALSE
</label>
</div>
component.ts file
#Component({
selector: '',
templateUrl: './.component.html',
styleUrls: ['./.component.css']
})
export class radioComponent implements OnInit {
checked = true;
}