Javascriptのチェックボックスの選択チェックの質問です。
一つのname値で複数のチェック項目があり（グループA）、別のname値で複数のチェック項目がある（グループB）、同様にC…という場合、グループA,B,Cでいずれかにチェックがあれば送信でき、どのグループにもチェックがない場合は送信ができないようにするには、どのようにしたら良いでしょうか。参考のURLもしくは、直接プログラムを教えていただく(こちらのほうが助かるかも)
のでもどちらでもOKです。宜しくお願いします。
↓例えばこんなフォームです。
あなたの好きなものを下記のグループの中からいずれかにチェックして下さい。
チェックは必須です。複数チェック可
グループA（グループA同士は同じname値）
□りんご
□みかん
□バナナ
グループB（グループB同士は同じname値）
□さる
□ぞう
□きりん
グループC（グループC同士は同じname値）
□沖縄
□北海道
□東京
---
グループ分けのカテゴリーが違うのですが
どれか一つでも「好きなもの」をチェックしてもらえばいいと言うような内容です。
ベストアンサー
-
susie-t
満足100pt
JavaScriptを無効にしていると送信されないです。その場合でも(チェックなしでも)送信したい場合はinput type="submit"ボタンを使い、formのonsubmitイベントでチェック、チェックエラー時はreturn falseします。以下、その場合の例です。
(コード中の&は&に読み替えて使用してください。回答時に置き換えられてしまうようです。)
<html> <head> </head> <script> function func(event, form){ function sub(name){ var elements = form.elements[name]; var flg = false; for(var i = 0; i < elements.length; i++){ if(elements[i].checked == true){ return true; } } return false; } if(!sub("A") && !sub("B") && !sub("C")){ alert("どれか一つチェックしてください。"); return false; } return true; } </script> <body> あなたの好きなものを下記のグループの中からいずれかにチェックして下さい。<br/> チェックは必須です。複数チェック可<br/> <br/> <form onsubmit="return func(event, this);"> グループA（グループA同士は同じname値）<br/> <input type="checkbox" name="A" value="りんご">りんご</input><br/> <input type="checkbox" name="A" value="みかん">みかん</input><br/> <input type="checkbox" name="A" value="バナナ">バナナ</input><br/> <br/> グループB（グループB同士は同じname値）<br/> <input type="checkbox" name="B" value="さる">さる</input><br/> <input type="checkbox" name="B" value="ぞう">ぞう</input><br/> <input type="checkbox" name="B" value="きりん">きりん</input><br/> <br/> グループC（グループC同士は同じname値）<br/> <input type="checkbox" name="C" value="沖縄">沖縄</input><br/> <input type="checkbox" name="C" value="北海道">北海道</input><br/> <input type="checkbox" name="C" value="東京">東京</input><br/> <br/> <input type="submit" value="送信"/> </form> <body> </html>onsubmitコード内のreturnを忘れないでください。もともとの処理は少し工夫してまとめています。JavaScript無効でもsubmitできると思います。
-
vanda
-
vandaその他の回答
-
susie-t
満足50pt
以下でどうでしょう。
<html> <head> </head> <script> function func(btn){ var form = btn.form; var A = form.elements["A"]; var flg = false; for(var i = 0; i < A.length; i++){ if(A[i].checked == true){ flg = true; break; } } if(flg){ form.submit(); return; } var B = form.elements["B"]; for(var i = 0; i < B.length; i++){ if(B[i].checked){ flg = true; break; } } if(flg){ form.submit(); return; } var C = form.elements["C"]; for(var i = 0; i < C.length; i++){ if(C[i].checked){ flg = true; break; } } if(flg){ form.submit(); return; } alert("どれか一つチェックしてください。"); } </script> <body> あなたの好きなものを下記のグループの中からいずれかにチェックして下さい。<br/> チェックは必須です。複数チェック可<br/> <br/> <form> グループA（グループA同士は同じname値）<br/> <input type="checkbox" name="A" value="りんご">りんご</input><br/> <input type="checkbox" name="A" value="みかん">みかん</input><br/> <input type="checkbox" name="A" value="バナナ">バナナ</input><br/> <br/> グループB（グループB同士は同じname値）<br/> <input type="checkbox" name="B" value="さる">さる</input><br/> <input type="checkbox" name="B" value="ぞう">ぞう</input><br/> <input type="checkbox" name="B" value="きりん">きりん</input><br/> <br/> グループC（グループC同士は同じname値）<br/> <input type="checkbox" name="C" value="沖縄">沖縄</input><br/> <input type="checkbox" name="C" value="北海道">北海道</input><br/> <input type="checkbox" name="C" value="東京">東京</input><br/> <br/> <input type="button" value="送信" onclick="func(this);"/> </form> <body> </html>同一名要素は上記のようにしてそれぞれにアクセスできます。ベタ打ちであまりスマートではないですが。工夫すれば共通処理化できると思います。
参考になれば幸いです。
-
vanda
-
この質問へのコメント
質問の情報
- 登録日時
- 2007-03-19 17:57:17
- 終了日時
- 2007-03-20 03:00:48
- 回答条件
- 回答にURL必須 1人3回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
【次の予想は定理か】位数３の体上のn次元ベクトル空間に於いて、その零でない相異なる(n+1)個の元の組Vを{…
くろょ
-
先日、クラスメイトの女子に告白されました。 その人は本気で自分を心から好きだと思ってくれているのです…
匿名質問者
1
-
小６です。 給食委員会の放送で、残飯を減らすためにやっていることを放送で話してみたいなことを先生から…匿名質問者
-
こんなものありますか？ ダイソーの「吊り下げワイシャツ収納」みたいなもの。これは、入れるところが、５…匿名質問者
-
この太ももってそんなに女の子の太ももに見えますか？ この前クラスの女子に「あんた本当に…匿名質問者
すみません、二番目の回答、関数funcの第一引数eventは不要でした。(使うつもりで書いたら、使わなかった＾＾；)
動作上問題はありませんが。気になったら削除してください。
スクリプトは初心者なので（汗）唸りながら悩んでおりましたが
こういうとき、susie-t のような方に巡りあえるので、はてなを重宝しています。サイトも拝見しました。JavaScriptの勉強をさせてもらいに、時々覗かせていただこうと思います。＾＾
susie-tさん、ありがとうございました。