title: Twitter Bootstrap: Get state of bootstrap checkbox buttons
body: <p>How do I get the "state" of buttons which have been pressed in bootstrap?</p>
  
  <p>I.e. I am using this code, which makes buttons 'toggle' like a checkbox:</p>
  
  <pre><code>&lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Left&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Middle&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Right&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which is from <a href="http://getbootstrap.com/2.3.2/javascript.html#buttons" rel="nofollow">the bootstrap manual here.</a></p>
  
  <p>But which I then click a submit button - there is no data contained in the $_POST. How do I know which button(s) have been selected?</p>
  
  <p>I have tried adding <code>'value="1" name="1"'</code> etc aswell to the buttons - but still nothing.</p>
  
  <p><strong>Edit: Here is the full solution</strong>, which I was able to create using the help from Felix below.</p>
  
  <pre><code>&lt;form method="post" action="" id="mform" class="form-horizontal"&gt;
   &lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
     &lt;button type="button" name="left"   value="1" class="btn btn-primary"&gt;Left&lt;/button&gt;
     &lt;button type="button" name="middle" value="1" class="btn btn-primary"&gt;Middle&lt;/button&gt;
     &lt;button type="button" name="right"  value="1" class="btn btn-primary"&gt;Right&lt;/button&gt;
   &lt;/div&gt;
   &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
      $('#mform').submit(function() {
          $('#mform .btn.active').each(function() {
               var input = document.createElement("input");
               input.setAttribute("type", "hidden");
               input.setAttribute("name", this.name);
               input.setAttribute("value", this.value);
               document.getElementById("mform").appendChild(input);
           });
      });
   &lt;/script&gt;
  </code></pre>