チェックボックスが縦に並んでいた場合、一番の上のチェックボックスにチェックをつけたあと、ShiftKeyを押しながら、例えば、上から5つ目のチェックボックスにチェックをつけたら、一番上から5つ目まで全部にチェックがつく、ということをやりたいです。
なおかつ、同じような動作でチェックを外すようなことをしたいです。
html
1<label class="hoge" id="hoge1"> 2 <input class="chk_grp" type="checkbox" name="hoge1" value="1" > 3 テスト1 4</label> 5 6<label class="hoge" id="hoge2"> 7 <input class="chk_grp" type="checkbox" name="hoge2" value="1" > 8 テスト2 9</label> 10 11<label class="hoge" id="hoge3"> 12 <input class="chk_grp" type="checkbox" name="hoge3" value="1" > 13 テスト3 14</label> 15 16... 17...
javascript
1<script> 2$(function(){ 3 var checked_last = null; 4 $('.hoge').on('click', function(event) { 5 if (event.shiftKey && checked_last) { 6 var $targets = $('.chk_grp'); 7 var p1 = $targets.index(checked_last) 8 var p2 = $targets.index(this) 9 for (var i = Math.min(p1, p2); i <= Math.max(p1, p2); ++i) { 10 $targets.get(i).checked = checked_last.checked; 11 } 12 } else { 13 checked_last = this; 14 } 15 }); 16}); 17</script>
参考サイト:https://www.softel.co.jp/blogs/tech/archives/5748
参考サイトのようにしたいのですが、うまくいきません。
ご教示お願いいたします。
また複数チェックについてももっと良い書き方があるのであれば、ご教示いいただけると助かります。
回答1件
あなたの回答
tips
プレビュー