前提・実現したいこと
ひとつのチェックボックスをクリックすることで、その他すべてのチェックボックスを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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/21 02:17