I'm currently trying to setup some bootstrap radio buttons. The code looks like the one from the Bootstrap examples, but the event is not fired to set a label active. Here's my code:

<div id="mergeType" class="btn-group">
    <label for="radio1" class="btn btn-sm btn-success">
        <input type="radio" name="mergeType" id="radio1" value="OVW">Überschreiben
    </label>
    <label for="radio2" class="btn btn-sm btn-success">
        <input type="radio" name="mergeType" id="radio2" value="ADD">Hinzufügen
    </label>
    <label for="radio3" class="btn btn-sm btn-success">
        <input type="radio" name="mergeType" id="radio3" value="KEE">Gefunde behalten
    </label>
    <label for="radio4" class="btn btn-sm btn-success">
        <input type="radio" name="mergeType" id="radio4" value="DEL" checked="checked">Gefundene entfernen
    </label>
</div>

I don't do anything with the radio buttons in the JavaScript backend. What might be the issue here?

I'm currently trying to setup some bootstrap radio buttons. The code looks like the one from the Bootstrap examples, but the event is not fired to set a label active. Here's my code:

<div id="mergeType" class="btn-group">
    <label for="radio1" class="btn btn-sm btn-success">
        <input type="radio" name="mergeType" id="radio1" value="OVW">Überschreiben
    </label>
    <label for="radio2" class="btn btn-sm btn-success">
        <input type="radio" name="mergeType" id="radio2" value="ADD">Hinzufügen
    </label>
    <label for="radio3" class="btn btn-sm btn-success">
        <input type="radio" name="mergeType" id="radio3" value="KEE">Gefunde behalten
    </label>
    <label for="radio4" class="btn btn-sm btn-success">
        <input type="radio" name="mergeType" id="radio4" value="DEL" checked="checked">Gefundene entfernen
    </label>
</div>

I don't do anything with the radio buttons in the JavaScript backend. What might be the issue here?

• javascript
• html
• twitter-bootstrap
• jsp

2 Answers 2

You did not add jquery plugin: Here is the working answer

https://jsfiddle/sesn/wLvzd193/2/

There is nothing wrong with your html

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-sm btn-success active">
    <input type="radio" name="mergeType" id="radio1" value="OVW">Überschreiben
  </label>
  <label class="btn btn-sm btn-success">
    <input type="radio" name="mergeType" id="radio2" value="ADD" checked>Hinzufügen
  </label>
  <label class="btn btn-sm btn-success">
    <input type="radio" name="mergeType" id="radio3" value="KEE">Gefunde behalten
  </label>
  <label class="btn btn-sm btn-success">
    <input type="radio" name="mergeType" id="radio4" value="DEL">Gefundene entfernen
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autoplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autoplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autoplete="off"> Radio 3
  </label>
</div>

There's some weird problem about jsfiddle link to be present in the answer. Stack overflow's new stack snippet is preferred. But, I don't have time right now to figure out how to use stack snippet.

Sorry for the long intro. Just copy and paste your code in jsfiddle and run it. The code works just fine. I mean you wanted the radio buttons to toggle, right? So, there you go!

Please revert if you have any more queries.