Bootstrap: set initial radio button checked in HTML

Question

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:

Answer 1

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.

Answer 2

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.

Answer 3

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.