jQurey ですべてをチェック済みにするブロックが複数ある場合の対処方法

実現したいこと
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件

ベストアンサー

あまり余計なIDやクラスをつけてHTMLを汚すのは嫌いなので、以下のようにしてみました。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8
9		<div class="categpry">
10			<label>
11				<input type="checkbox" class="checkall" /> 全てチェック
12			</label>
13			<div>
14				<label><input type="checkbox" name="ids[]" value="1" />1</label>
15				<label><input type="checkbox" name="ids[]" value="2" />2</label>
16				<label><input type="checkbox" name="ids[]" value="3" />3</label>
17			</div>
18		</div>
19
20		<div class="categpry">
21			<label>
22				<input type="checkbox" class="checkall" /> 全てチェック
23			</label>
24			<div>
25				<label><input type="checkbox" name="ids[]" value="4" />4</label>
26				<label><input type="checkbox" name="ids[]" value="5" />5</label>
27				<label><input type="checkbox" name="ids[]" value="6" />6</label>
28			</div>
29		</div>
30		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
31		<script type="text/javascript">
32			$(function () {
33				$('.checkall').on('click', function () {
34					$(this).parents('.categpry')
35							.find('input[name^=ids]')
36							.prop('checked', $(this).prop('checked'));
37				});
38			});
39		</script>
40	</body>
41</html>