CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapjsp
macskay
macskay

Reputation: 391

Bootstrap Radio Buttons not toggling

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?

Upvotes: 4

Views: 13690

Answers (2)

SESN
SESN

Reputation: 1283

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

https://jsfiddle.net/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" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Upvotes: 5

Roy
Roy

Reputation: 359

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.

Upvotes: 0

Related Questions