
以下のサンプルで、チェックを入れる部分をループにしたいのですが、うまくいきません。
-----------------------------------------------------------------
<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...
-
Selectボックスの幅を自動で広...
-
追加ボタンを押した際に ok ボ...
-
<select> をmultiple にしてい...
-
二つの入力欄に、同時に同じ文...
-
どのボタンがクリックされたの...
-
【jQuery】input nameの文字列...
-
ラジオボタンで診断テストを作...
-
フォーム内のボタンをまとめてd...
-
JSのボタンを複数う使うには
-
HTAで、こんなボタンが作りたい。
-
Pythonで会員サイトの自動ログ...
-
1つのform内に2つのsubmitボタ...
-
Visual Studioのデザインでの非...
-
中百舌鳥駅と深井駅を入れ替え...
-
UWSCでブログへ自動投稿したい...
-
HTML中のTABLEのデータを抽出す...
-
テキストフィールド未入力の場...
-
ラジオボタンの値でリンク先を...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jsp/Java】チェックボックス...
-
背景色を変えて未入力チェック...
-
チェックが入っていなかったら...
-
オフになっているチェックボッ...
-
チェックボックスとラジオボタ...
-
チェックボックスを使って条件検索
-
チェックボックスのON/OFFでVal...
-
確認ページからフォームページ...
-
jquery複数のcheckboxの値について
-
テキストフィードを「無効にす...
-
チェックボックスのON/OFFに応...
-
特定のID(またはクラス)で括ら...
-
localStorageでのcheckbox制御
-
削除確認のアラートを出したい
-
チェックボックスの値
-
チェックボックスとテキストの値
-
配列のチェックボックスをjavas...
-
チェックした数でメッセージを...
-
フォームの制御について
-
checkboxをクリックしてリロー...
おすすめ情報