javascript - ボタングループでアクティブなボタンを取得する (ブートストラップ)

Question

ボタングループがあり、アクティブなボタンに応じて変更時に他のフィールドを更新したいと考えています。ここでjsfiddleを参照してください

これは、ドキュメントからコピーされた HTML です。

<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>

Button 行は本来の動作をします。次に、変更のために div
のクリック イベントを監視します。.arrUpdateクラスを持つ複数のボタングループがあります.arrUpdate。これが 2 番目のクラスの理由です。.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); 

})

しかし、クリックイベントが発生した後に「アクティブ」クラスが追加されるようです。したがって、値#hierHierは常に 1 回のクリックの背後にあります。

どうすればこれを解決できますか?
または、このチェックボックス配列でアクティブなボタンをすべて取得するより良い方法はありますか?