人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptのチェックボックスの選択チェックの質問です。

一つのname値で複数のチェック項目があり(グループA)、別のname値で複数のチェック項目がある(グループB)、同様にC…という場合、グループA,B,Cでいずれかにチェックがあれば送信でき、どのグループにもチェックがない場合は送信ができないようにするには、どのようにしたら良いでしょうか。参考のURLもしくは、直接プログラムを教えていただく(こちらのほうが助かるかも)
のでもどちらでもOKです。宜しくお願いします。

↓例えばこんなフォームです。

あなたの好きなものを下記のグループの中からいずれかにチェックして下さい。
チェックは必須です。複数チェック可

グループA(グループA同士は同じname値)
□りんご
□みかん
□バナナ

グループB(グループB同士は同じname値)
□さる
□ぞう
□きりん

グループC(グループC同士は同じname値)

□沖縄
□北海道
□東京
---

グループ分けのカテゴリーが違うのですが
どれか一つでも「好きなもの」をチェックしてもらえばいいと言うような内容です。

●質問者: vanda
●カテゴリ:ウェブ制作
✍キーワード:JavaScript name URL あなた みかん
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● susie-t
●50ポイント

以下でどうでしょう。

<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>

同一名要素は上記のようにしてそれぞれにアクセスできます。ベタ打ちであまりスマートではないですが。工夫すれば共通処理化できると思います。

参考になれば幸いです。

ダミー:http://q.hatena.ne.jp

◎質問者からの返答

ありがとうございます。

項目ごとのチェックはバッチリです!

ただ質問なのですが、このスクリプトは、送信者のブラウザがJavaScriptを無効にしていた場合も送信されるのでしょうか?お返事いただけたら幸いです。


2 ● susie-t
●100ポイント ベストアンサー

JavaScriptを無効にしていると送信されないです。その場合でも(チェックなしでも)送信したい場合はinput type="submit"ボタンを使い、formのonsubmitイベントでチェック、チェックエラー時はreturn falseします。以下、その場合の例です。

(コード中の&amp;は&に読み替えて使用してください。回答時に置き換えられてしまうようです。)

<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") &amp;&amp; !sub("B") &amp;&amp; !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できると思います。

ダミー:http://q.hatena.ne.jp

◎質問者からの返答

すごい!ありがとうございます。とっても助かりました。一旦ここで回答受付を停止して、教えていただいたスクリプトで頑張ってみます。

丁寧な回答感謝です!!

--

おかげさまで希望のものが作れました。

本当にありがとうございました!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ