以下のサンプルで、チェックを入れる部分をループにしたいのですが、うまくいきません。
-----------------------------------------------------------------
<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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスの設定
-
配列のチェックボックスをjavas...
-
オフになっているチェックボッ...
-
チェックボックスのON/OFFでVal...
-
確認ページからフォームページ...
-
背景色を変えて未入力チェック...
-
selectメニューによるチェック...
-
チェックボックスを複数選択し...
-
checkboxをクリックしてリロー...
-
フォームのチェックボックスの...
-
【jsp/Java】チェックボックス...
-
チェックボックスで合計値を計...
-
チェックボックスのON/OFFに応...
-
複数のチェックボックス項目が...
-
return trueとreturn falseの用...
-
value内に変数を入れたい
-
プルダウン 項目が多いので先頭...
-
【jQuery】input nameの文字列...
-
フォームが空欄の時にフォーム...
-
tableの任意行にfocusをあてる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jsp/Java】チェックボックス...
-
チェックボックスのON/OFFでVal...
-
複数のチェックボックス項目が...
-
checkboxをクリックしてリロー...
-
背景色を変えて未入力チェック...
-
チェックボックスの設定
-
チェックボックスのON/OFFに応...
-
EclipseでSpringを使用し、テー...
-
JSP内で可変するチェックボック...
-
オフになっているチェックボッ...
-
複数あるチェックボックスから...
-
チェックボックスが複数ある場...
-
チェックボックスに全てチェッ...
-
確認ページからフォームページ...
-
特定のID(またはクラス)で括ら...
-
チェックボックス
-
ラジオボタンとチェックボック...
-
チェックボックスで指定したも...
-
チェックボックスを使って条件検索
-
配列のチェックボックスをjavas...
おすすめ情報