Bootstrap Toggleで多重発火してしまう

前提・実現したいこと

ひとつのチェックボックスをクリックすることで、その他すべてのチェックボックスをON/OFFしたいです。普通のチェックボックスではなく、Bootstrap Toggleを使用したいです。

発生している問題

2回ずつイベントが発生してしまいます。

該当のソースコード

html
1<input type="checkbox" class="chkAll" name="chkAll" data-toggle="toggle">
2
3<br/>
4<input type="checkbox" class="chkOne" name="chk1" data-toggle="toggle">
5<input type="checkbox" class="chkOne" name="chk2" data-toggle="toggle">
6<input type="checkbox" class="chkOne" name="chk3" data-toggle="toggle">

javascript
1$(function(){
2  $('.chkAll').on('change', function(){
3    var thisValue = $(this).prop('checked');
4    alert('chkAll change '+thisValue);
5    $('.chkOne').prop('checked', thisValue).change();
6  });
7  $('.chkOne').on('change', function(){
8    var thisValue = $(this).prop('checked');
9    var thisName = $(this).attr('name');
10    alert('chkOne change '+thisName+thisValue);
11  });
12});

こちらに動かせるコードがあります。
https://jsfiddle.net/namitan/aq9Laaew/229671/

試したこと

チェックボックスからdata-toggle="toggle"を外して普通のチェックボックスにしてみると、1回ずつイベントが発生し正常に動作します。

Bootstrap Toggleを使う場合はなにか別のやり方が必要なのでしょうか？詳しい方、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

Bootstrapの場合は、bootstrapToggle()を使えばよかったかと思います。
なので、以下のようなコードだけでいいのではないでしょうか？
(stateを取るところはもっといい方法があるかもしれません)

js
1$(function(){
2  $('.chkAll').on('change', function(){
3    var thisValue = $(this).prop('checked');
4    var state = thisValue ? 'on' : 'off';
5    $('.chkOne').bootstrapToggle(state);
6  });
7});