配列のチェックボックスをjavascriptで全選択する際のループの仕方

以下のサンプルで、チェックを入れる部分をループにしたいのですが、うまくいきません。

-----------------------------------------------------------------
<form name="form" method="GET">
<input type="checkbox" name="aaa" onClick="AllChecked();" /> 全選択

<input type="checkbox" name="bbb[0]">
<input type="checkbox" name="bbb[1]">
<input type="checkbox" name="bbb[2]">

</form>
<script language="JavaScript" type="text/javascript">
<!--
function AllChecked(){
var check = document.form.aaa.checked;

document.form.elements['bbb[0]'].checked = check;
document.form.elements['bbb[1]'].checked = check;
document.form.elements['bbb[2]'].checked = check;
}
//-->
</script>
-----------------------------------------------------------------

bbbの配列は、データベースから抽出したデータ数によって変化します。
最大30個あります。
bbbの数の分だけ、ループでチェックを入れたいのですが、
どうしたら良いのでしょうか。

※ちなみに、このフォームには、他にも配列のチェックボックスがあります。
　bbbだけ、全選択の処理を行いたいです。

よろしくお願いいたします。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2020/09/15 08:52

こんにちは

どのような動作にしたいのか不明点が多いですが、ひとまず
＞bbbだけ、全選択の処理を行いたいです。
の文言通りだけで良いものとするなら…

function AllChecked(){
let f = document.forms['form'];
if(f.elements['aaa'].checked){
f.querySelectorAll('input[name^="bbb"]').forEach((e)=>{e.checked = true;});
}
}

とかでいかがかと。

※ 全チェック後に、個々のチェックを外したり、「全選択」のチェックを外したりしても、特に何も処理はしませんので、操作によっては画面上の整合が取れていない状態になり得ます。

この回答へのお礼

ありがとうございます。
実現出来ました。
javascriptは初心者で、よく理解できていませんので、これから勉強します。
整合性をとる処理はこれから入れようと思います。

お礼日時：2020/09/15 12:13

No.3 回答者： yambejp 回答日時： 2020/09/15 10:08

対象ブラウザにIEなど非モダンなものがあると、一気にローテクになるので注意が必要です

IEの場合とくに対応すべきバージョンも視野にいれる必要があります

この回答へのお礼

ありがとうございます。
公のHPではなく、社内専用ですので、あまり考えていませんでしたが、
ブラウザも考慮しないといけないのですね。
もっと勉強が必要です。

お礼日時：2020/09/15 12:08

No.1 回答者： babu_babu_baboo 回答日時： 2020/09/15 08:47

<form name="form" method="GET">

<p>
　<input type="checkbox" name="aaa" onClick="AllChecked (this, 'bbb');" /> 全選択

　<input type="checkbox" name="bbb[0]">
　<input type="checkbox" name="bbb[1]">
　<input type="checkbox" name="bbb[2]">
</p>

</form>

<script>
function AllChecked (e, str){
　let
　　check = e.checked,
　　es = e.form.querySelectorAll (`input[name^="${str}"]`);
　[...es].forEach (e=> e.checked = check);
}
</script>

この回答へのお礼

ありがとうございます。
実現出来ました。
javascriptは初心者で、よく理解できていませんので、これから勉強します。
整合性をとる処理はこれから入れようと思います。

お礼日時：2020/09/15 12:13