Bootstrap Button Radio Group Default Value (Check Attribute) Not Working

Bootstrap Button Radio Group Default Value (Check Attribute) Not Working

After countless hours of research, I’m still dumbfounded on how to get the checked attribute working for button radio groups for Bootstrap. I’m trying to default “Excellent.”
Even though I know for sure radio inputs are checked and not selected, I even tried selected and nothing works.



If clarification is needed, please let me know.

Solutions/Answers:

Solution 1:

In twitter bootstrap, you will indicate the default value using the ‘active’ class.
So, for your example, if you are using Twitter Bootstrap, the following code will use Excellent as default checked.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default **active**">
        <input type="radio" name="inputWalls" id="inputWalls" value="Excellent" checked>
    Excellent </label>
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Good">
    Good </label>
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Poor">
    Poor </label>
</div>

When you toggle over the buttons, you add/remove the class – ‘active’ from the label’s class.

Related:  Full width hero unit in Twitter Bootstrap

For an example, check this out – http://getbootstrap.com/javascript/#buttons – Radio

Solution 2:

Looks like the question and answer are using bootstrap 3.0. I had the same question but with bootstrap 2.3.

<div class="btn-group" data-toggle="buttons-radio">
    <button class="btn active"> Option 1</button>
    <button class="btn"> Option 2</button>
    <button class="btn"> Option 3</button>
</div>

Solution 3:

Two things:

  1. You should use different IDs for each of your <input> elements — they’re supposed to be unique!
  2. Your example works for me! Check it out at JSFiddle!

References