
以下のサンプルで、チェックを入れる部分をループにしたいのですが、うまくいきません。
-----------------------------------------------------------------
<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ベストアンサー
- 回答日時:
こんにちは
どのような動作にしたいのか不明点が多いですが、ひとまず
>bbbだけ、全選択の処理を行いたいです。
の文言通りだけで良いものとするなら…
function AllChecked(){
let f = document.forms['form'];
if(f.elements['aaa'].checked){
f.querySelectorAll('input[name^="bbb"]').forEach((e)=>{e.checked = true;});
}
}
とかでいかがかと。
※ 全チェック後に、個々のチェックを外したり、「全選択」のチェックを外したりしても、特に何も処理はしませんので、操作によっては画面上の整合が取れていない状態になり得ます。
ありがとうございます。
実現出来ました。
javascriptは初心者で、よく理解できていませんので、これから勉強します。
整合性をとる処理はこれから入れようと思います。
No.3
- 回答日時:
対象ブラウザにIEなど非モダンなものがあると、一気にローテクになるので注意が必要です
IEの場合とくに対応すべきバージョンも視野にいれる必要があります
ありがとうございます。
公のHPではなく、社内専用ですので、あまり考えていませんでしたが、
ブラウザも考慮しないといけないのですね。
もっと勉強が必要です。
No.1
- 回答日時:
<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は初心者で、よく理解できていませんので、これから勉強します。
整合性をとる処理はこれから入れようと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスのON/OFFでVal...
-
【jsp/Java】チェックボックス...
-
スクリプト内でチェックボック...
-
ラジオボタンとチェックボック...
-
複数あるチェックボックスから...
-
チェックボックスの無効化、有効化
-
プルダウン 項目が多いので先頭...
-
クリックされた罫表セルの行番...
-
return trueとreturn falseの用...
-
onClickとsubmitの処理順序
-
Selectボックスの幅を自動で広...
-
ASP.NETでNAME属性を固定にしたい
-
<input>の選択肢をプルダウンメ...
-
slickのレスポンシブ > center...
-
テキストエリアに入力した改行...
-
DBの値を利用して、3つの連動し...
-
プルダウンの選択内容を次のペ...
-
チェックボックス付きのテーブ...
-
二つの入力欄に、同時に同じ文...
-
マイナスなら赤字で表示したい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jsp/Java】チェックボックス...
-
背景色を変えて未入力チェック...
-
チェックが入っていなかったら...
-
オフになっているチェックボッ...
-
チェックボックスとラジオボタ...
-
チェックボックスを使って条件検索
-
確認ページからフォームページ...
-
jquery複数のcheckboxの値について
-
チェックボックスのON/OFFでVal...
-
テキストフィードを「無効にす...
-
チェックボックスのON/OFFに応...
-
特定のID(またはクラス)で括ら...
-
削除確認のアラートを出したい
-
フォームの制御について
-
チェックボックスとテキストの値
-
checkboxをクリックしてリロー...
-
チェックした数でメッセージを...
-
localStorageでのcheckbox制御
-
チェックボックスの値
-
配列のチェックボックスをjavas...
おすすめ情報