Bootstrap: set initial radio button checked in HTML

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:


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

Solutions/Answers:

Solution 1:

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.

Solution 2:

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.

Related:  No img-responsive in Bootstrap 4

Solution 3:

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.

References