特定のID(またはクラス）で括られたチェックボックスを一括操作したい

お世話になります。
IDやクラスで括られた、特定の範囲のチェックボックスを一括操作したいと考えています。

チェックボックス一括チェックと検索すると多くの情報を拝見することが出来ますが、どれも全てのチェックボックスが対象で、”特定の範囲”を対象としたも情報を得ることが出来ません。御教示願えないでしょうか。

少し具体的にご説明すると、北海道・東北地方というグループにある一括チェックボックスをチェックすると、北海道・東北地方に属する、同県がチェックされ、関東地方にある一括を操作すると、関東地方に属する都県がチェックされるという具合です。（各都道府県のname属性は同じ）

以下ソースは、色々と試しているうちの1つです。
お忙しいなか恐縮ですがアドバイスのほど頂戴出来れば幸いです。
よろしくお願いいたします。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4 …
<script>
$(function() {
$('#category_all1').on('click', function() {
$('.category').prop('checked', this.checked);
});

$('.category').on('click', function() {
if ($('#categories1 :checked').length == $('#categories1 :input').length){
$('#category_all1').prop('checked', 'checked');
}else{
$('#category_all1').prop('checked', false);
}
});

$('#category_all2').on('click', function() {
$('.category').prop('checked', this.checked);
});

$('.category').on('click', function() {
if ($('#categories2 :checked').length == $('#categories2 :input').length){
$('#category_all2').prop('checked', 'checked');
}else{
$('#category_all2').prop('checked', false);
}
});
});
</script>




<input type="checkbox" id="category_all1" name="category_all1">
<label for="category_all1">北海道・東北地方</label>
<div id="categories1">
<input type="checkbox" name="category[]" id="category01" value="01" class="category">
<label for="category01">北海道</label>
<input type="checkbox" name="category[]" id="category02" value="02" class="category">
<label for="category02">青森</label>
<input type="checkbox" name="category[]" id="category03" value="03" class="category">
<label for="category03">秋田</label>
<input type="checkbox" name="category[]" id="category04" value="04" class="category">
<label for="category04">岩手</label>
<input type="checkbox" name="category[]" id="category05" value="05" class="category">
<label for="category05">宮城</label>
</div>


<input type="checkbox" id="category_all2" name="category_all2">
<label for="category_all2">関東地方</label>
<div id="categories2">
<input type="checkbox" name="category[]" id="category06" value="06" class="category">
<label for="category06">千葉</label>
<input type="checkbox" name="category[]" id="category07" value="07" class="category">
<label for="category07">埼玉</label>
<input type="checkbox" name="category[]" id="category08" value="08" class="category">
<label for="category08">東京</label>
<input type="checkbox" name="category[]" id="category09" value="09" class="category">
<label for="category09">神奈川</label>
<input type="checkbox" name="category[]" id="category10" value="10" class="category">
<label for="category10">茨城</label>
</div>

No.2 ベストアンサー 回答者： fujillin 回答日時： 2021/01/02 23:52

No1です。

＞チェックを外す動きを持たせるためにはどのようにしたらいいのでしょうか。
一括ボックスと同じ状態にすればいいってことでしょうか？

そちらのほうが処理内容としては単純になります。
「チェック状態か」というチェックを外して、一括ボックスと同じ状態にセットすればよいです。

document.addEventListener('click', e =>{
let
t = e.target,
m = t.id.match(/^category_all(\d+)$/);
if(t.nodeName != 'INPUT' || !m) return;
let
f = t.checked,
sel = '#categories' + m[1] + ' input[type="checkbox"]';
document.querySelectorAll(sel).forEach( el =>{ el.checked = f; });
});

この回答へのお礼

fujillinさま

早々のお返事をありがとうございます！
セットごとにJS部分が増えていくのかと考えていましたが、少ないスクリプトで実装出来ることに頭が下がります。
期待通りの動きを得ることが出来ました。
1度目のJSと２どめのJSとで見比べながら、理解を深めたいと思います。
ありがとうございました！

お礼日時：2021/01/03 00:42

No.1 回答者： fujillin 回答日時： 2021/01/02 22:04

こんばんは

規則性に関する説明がないので、勝手に以下のように解釈しました。
・「一括チェックボックス」のIDは、必ず「category_all##」形式となっている
　　（##は正の整数値）
・対応するグループは、IDが「categories##」の要素内の<input tyep="checkbox">全て
　　（##は一括チェックボックスのNoと同一）
・「一括ボックスをチェックした時」だけ、対応するinputをチェック状態にする
　　（チェックを外した時は何もしない）

…という条件でよいのであれば、

document.addEventListener('click', e =>{
let sel, t = e.target, m = t.id.match(/^category_all(\d+)$/);
if(t.nodeName != 'INPUT' || !m || !t.checked) return;
sel = '#categories' + m[1] + ' input[type="checkbox"]';
document.querySelectorAll(sel).forEach( el =>{ el.checked = 'cheked'; });
});

※ 上記のスクリプトだけであれば、jQueryは不要です。
※ 前記の条件だけを利用していますので、他のIDやnameは無くても動作します。
※ 条件を満たす組み合わせであれば、文章中に何セットあっても動作します。

この回答へのお礼

fujillinさま

おやすみのところ、ご親切な回答をありがとうございます。
描いている動作を実現出来て感謝です。
しかも短いJSで動くので尚更。
感激です。

>規則性に関する説明がないので

恐れ入ります。囲んだID単位で動かせれば他は何とかできれば・・・そんな気持ちでいたので特に規則は記載しませんでした。

ただ、申し訳ありませんが、チェックを外す動きを持たせるためにはどのようにしたらいいのでしょうか。

お願いばかりで恐縮ですが、今一度、ご指導いただければ幸いです。
よろしくお願いいたします。

お礼日時：2021/01/02 22:29