twitter bootstrap button toggle does not work

Question

i have the bootstrap-button.js and have this markup, but when i click on the button, it does not toggle it to show that it has been clicked. any tips as to what is missing?

<div class="control-group">
  <div class="btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
    <button class="btn" id="chkbox1"  type="button" value="1Fail" data-toggle="button"> 1 Failure </button>
    <button class="btn" id="chkbox2"  type="button" value="2Fail" data-toggle="button"> 2 Failure </button>
    <button class="btn" id="chkbox3" type="button" value="OtherFail" data-toggle="button"> Other Failure </button>
  </div>
  <input type="hidden" name="checkbox_group" value="1"/>
</div>

second part of the question is how to get the data into javascript as to which button was clicked? if 1Fail was clicked, it should toggle and js code to detect that 1Fail was clicked. Thanks in advance.

Answer 1

The problem seems to be that you added data-toggle="button" to every check button, which is not necessary. Because you already have data-toggle="buttons-checkbox" in the outer div element .

So change it to look like this:

    <div class="control-group">
      <div class="btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
        <button class="btn" id="chkbox1"  type="button" value="1Fail" > 1 Failure </button>
        <button class="btn" id="chkbox2"  type="button" value="2Fail" > 2 Failure </button>
        <button class="btn" id="chkbox3" type="button" value="OtherFail" > Other Failure </button>
      </div>
      <input type="hidden" name="checkbox_group" value="1"/>
</div>

EDIT :

Sorry, I didn't notice your second question. When a button is clicked an active class will be added to it, so you can detect this with jQuery's hasClass method.