Bootstrap radio button "checked" flag

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

Tasker

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.

Lapp

Thanks @Trevor. The button is checked now, but when I submit the form, it doesn't understand it as checked. If I manually click in the others options without the 'active', the submit can understand the value. With 2013 active, if I click in 2011, for example, and click again in 2013 and submit the form it works. Do you have any ideia? Thanks again. – Tasker

Looks like this: #11462934 – Tasker

Oh in that case try adding the checked="" to the input element as well. I'll update my answer. – Lapp

Thanks for that, it's a real forehead-slapper when you read it! – Mindexpanding

Thanks! One plus vote for you and one down for angular for the strange behaviour... – Tendance

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();

Mort

If you're having trouble with the buttons not being highlighted after hitting "Back", this snippet of JavaScript fixes that. Thanks, @rawrkats. – Adigranth

I like this solution the best, but I used $(".btn-group").find(':input:checked').parent('.btn').addClass('active'); so that it runs a touch faster on pages that don't have any of these. – Innings

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.

Timely

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>

Ratfink

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;
}

Bigname