実現したいこと
HTML内に「全てをチェック」の[親]チェックボックスと、[親]チェックボックスにチェックが入ることで同時にチェックが入る[子]チェックボックスのブロックが複数ある場合、jQueryのループで記述したい。
現状のコード
html
1<!-- 1つ目のブロック --> 2<label class="form-check-label checkAll_1"> 3<input type="checkbox" class="form-check-input" name="ids[]"> 全てチェック 4</label> 5<label class="form-check-label"> 6<input type="checkbox" class="form-check-input check_1" name="ids[]" value="aaa">aaa</label> 7<label class="form-check-label"> 8<input type="checkbox" class="form-check-input check_1" name="ids[]" value="bbb">bbb</label> 9・・・ 10<!-- 2つ目のブロック --> 11<label class="form-check-label checkAll_2"> 12<input type="checkbox" class="form-check-input" name="ids[]"> 全てチェック 13</label> 14<label class="form-check-label"> 15<input type="checkbox" class="form-check-input check_2" name="ids[]" value="aaa">aaa</label> 16<label class="form-check-label"> 17<input type="checkbox" class="form-check-input check_2" name="ids[]" value="bbb">bbb</label> 18・・・
「checkAll_1」などの末尾の数字はユーザーIDを動的に出しているので、個数などはその時によって異なり、連番になるとも限りません。
変数 ids に配列としてユーザーIDが格納されています。
javascript
1 $(function(){ 2 $.each(ids, function(index, elem){ 3 $('.checkAll_' + elem).click(function(){ 4 if($('input.check_' + elem).prop('checked') == false){ 5 $("input:checkbox[class='form-check-input check_" + elem + "']").prop("checked", true); 6 } else { 7 $("input:checkbox[class='form-check-input check_" + elem + "']").prop("checked", false); 8 } 9 }); 10 }); 11 });
以上のように記述したのですが、[子]チェックボックスにチェックが入りません。原因を教えていただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/28 10:09