title: Getting active buttons in button-group (bootstrap)
body: <p>I have a button group and am willing to update some other field on change according to the active buttons. 
  See the <a href="http://jsfiddle.net/hA423/4/" rel="noreferrer">jsfiddle here</a></p>
  
  <p>This is the HTML, copied from the documentation:</p>
  
  <pre><code>&lt;div class="btn-group arrActiviteit arrUpdate" data-toggle="buttons"&gt;
      &lt;label class="btn btn-primary active" data-wat='foo'&gt;
         &lt;input type="checkbox"&gt; Item 1
      &lt;/label&gt;
      &lt;label class="btn btn-primary" data-wat='bar'&gt;
         &lt;input type="checkbox"&gt; Item 2
      &lt;/label&gt;
      &lt;label class="btn btn-primary" data-wat='something'&gt;
        &lt;input type="checkbox"&gt; item 3
      &lt;/label&gt;
      &lt;label class="btn btn-primary" data-wat='orElse'&gt;
        &lt;input type="checkbox"&gt; item 4
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The Button row acts like it should do.<br>
  Then I watch for a click event on the <code>.arrUpdate</code> div for change. I've got multiple button groups which all have the <code>.arrUpdate</code> class. That's the reason for the second class: <code>.arrActiviteit</code></p>
  
  <pre><code>$('.arrUpdate').click(function(e){
     val = ''; // for holding the temporary values
  
     $('.arrActiviteit label').each(function(key, value){
         if(value.className.indexOf('active') &gt;=0){
             val += value.dataset.wat
         }
     })
  
     // just for debug reasons.
     $('#hierHier').html(val); 
  
  })
  </code></pre>
  
  <p>But it appears that the 'active' class gets added <em>after</em> the click event is fired. So the value in <code>#hierHier</code> is always behind one click, so to say. </p>
  
  <p><strong>How can I resolve this?<br>
  Or is there a better way to retrieve all the active buttons in this checkbox-array?</strong></p>