title: Bootstrap - Select all checkbox with javascript
body: <p>I have the following HTML structure using bootstrap. I need to select a checkbox to select all the checkboxes but the javascript codes I've been testing have not worked (I'm not very good at javascript). I think these codes do not work because they do not take into account the "active" class that uses bootstrap.</p>
  
  <p>The following javascript not worked for me:</p>
  
  <pre><code>    &lt;script&gt;
      function toggle(source) {
      var checkboxes = document.querySelectorAll('input[type="checkbox"]');
      for (var i = 0; i &lt; checkboxes.length; i++) {
      if (checkboxes[i] != source)
      checkboxes[i].checked = source.checked;
      }
      }
      &lt;/script&gt;
  </code></pre>
  
  <p>Test</p>
  
  <pre><code>    &lt;form action="" method="post" class="form-horizontal"&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;EXAMPLE&lt;/legend&gt;
              &lt;div class="form-group rowauto" data-toggle="buttons"&gt;
                  &lt;label for="selectall"&gt;SELECT/UNSELECT ALL:&lt;/label&gt;
                  &lt;label class="btn btn-success active checkboxkox"&gt;
                      &lt;input type="checkbox" id="selectall" name="selectall" autocomplete="off" checked&gt;
                      &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
          &lt;fieldset&gt;
              &lt;div class="row rowauto"&gt;
                  &lt;div class="col-sm-1"&gt;
                      &lt;div class="form-group rowauto" data-toggle="buttons"&gt;
                          &lt;label class="btn btn-success active checkboxkox"&gt;
                              &lt;input type="checkbox" id="check_1" name="check_1" autocomplete="off" checked&gt;
                              &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;                  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row rowauto"&gt;
                  &lt;div class="col-sm-1"&gt;
                      &lt;div class="form-group rowauto" data-toggle="buttons"&gt;
                          &lt;label class="btn btn-success active checkboxkox"&gt;
                              &lt;input type="checkbox" id="check_2" name="check_2" autocomplete="off" checked&gt;
                              &lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;                  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>The IDs of my checkboxs are generated by a loop "foreach" in PHP</p>