Getting active buttons in a button group (bootstrap)

Question

I have a group of buttons and I want to update another field when changing according to the active buttons. See jsfiddle here

This is HTML copied from the documentation:

<div class="btn-group arrActiviteit arrUpdate" data-toggle="buttons"> <label class="btn btn-primary active" data-wat='foo'> <input type="checkbox"> Item 1 </label> <label class="btn btn-primary" data-wat='bar'> <input type="checkbox"> Item 2 </label> <label class="btn btn-primary" data-wat='something'> <input type="checkbox"> item 3 </label> <label class="btn btn-primary" data-wat='orElse'> <input type="checkbox"> item 4 </label> </div> 

The Button string acts as it should. Then I look at the click event on the div .arrUpdate for a change. I have several button groups, all of which have a .arrUpdate class. This is the reason for the second class: .arrActiviteit

 $('.arrUpdate').click(function(e){ val = ''; // for holding the temporary values $('.arrActiviteit label').each(function(key, value){ if(value.className.indexOf('active') >=0){ val += value.dataset.wat } }) // just for debug reasons. $('#hierHier').html(val); }) 

But it seems that after the click event is fired, the 'active' class is activated. Thus, the value in #hierHier always just one click away, so to speak.

How can i solve this?
Or is there a better way to get all active buttons in this checkbox array?

Answer 1

solvable

---

update: best Twitter solution Upload onclick event on radio buttons

---

http://jsfiddle.net/hA423/7/

I decided to use it timeout so that your function starts after boot events ...

There must be some other ways to do this ...

 $('.btn').on('click',function(e){ setTimeout(count); })