CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Richard
Richard

Reputation: 65550

Bootstrap: set initial radio button checked in HTML

I'm using Bootstrap's JavaScript buttons to style some radio buttons, and I don't seem to be able to set an initial button as checked.

Here is my code: 

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-info">
    <input checked="checked" type="radio" id="match-three" name="options">Three numbers
  </label>
  <label class="btn btn-info">
    <input type="radio" name="options" id="match-four">Four numbers
  </label>
</div>

The first button has checked="checked", but it isn't being styled as checked.

The buttons are being styled OK after click events, so I'm not sure what is going wrong on initial load.

Bootply version here: http://bootply.com/89566

Upvotes: 20

Views: 62331

Answers (3)

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21708

If you're using the HTML 5 doctype, just use checked without any value:

<label class="btn btn-info active">
    <input checked type="radio" id="match-three" name="options">Three numbers
</label>

checked="checked" should work as well, so you'll have to clarify what's not working for you.

  • Having a checked attribute on the input will ensure correct state on the form field
  • Adding an active class on the label will set the correct visual state

Reference documentation.

Upvotes: 19

bbengfort
bbengfort

Reputation: 5392

Like Skelly mentioned, the active class is what Bootstrap is toggling, it doesn't look at the checked attribute. You don't have to do it with Javascript however... 

<label class="btn btn-info active">
    <input checked type="radio" id="match-three" name="options">Three numbers
</label>

Will give you what you're looking for.

Upvotes: 8

Carol Skelly
Carol Skelly

Reputation: 362440

If you want the Bootstrap button() component to recognize the checked inputs initially you need to add some jQuery like..

$('[checked="checked"]').parent().addClass("active");

This will set the active state to the appropriate buttons/labels in the group.

Upvotes: 12

Related Questions