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

Question

vanda

35

34もっと見る

150pt

ウェブ制作

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

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

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

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

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

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

グループC（グループC同士は同じname値）

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

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

回答の条件

URL必須
1人3回まで

登録：2007/03/19 17:57:17
終了：2007/03/20 03:00:48

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

susie-t99182007/03/19 19:27:09

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>

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

参考になれば幸いです。

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

ありがとうございます。

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

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

2007/03/19 20:07:03

susie-t 2007/03/20 10:31:57

お役に立てて幸いです。
すみません、二番目の回答、関数funcの第一引数eventは不要でした。(使うつもりで書いたら、使わなかった＾＾；)
動作上問題はありませんが。気になったら削除してください。
vanda 2007/03/23 00:18:27

どうもご丁寧にありがとうございます。
スクリプトは初心者なので（汗）唸りながら悩んでおりましたが
こういうとき、susie-t のような方に巡りあえるので、はてなを重宝しています。サイトも拝見しました。JavaScriptの勉強をさせてもらいに、時々覗かせていただこうと思います。＾＾
vanda 2007/03/23 00:25:06

すみません、呼び捨てしてしまいました。
susie-tさん、ありがとうございました。

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

susie-t · Accepted Answer · 2007-03-20T00:11:14+09:00

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") &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

susie-t · Accepted Answer · 2007-03-20T00:11:14+09:00

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") &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

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

ベストアンサー

susie-t99182007/03/20 00:11:14

その他の回答（1件）

susie-t99182007/03/19 19:27:09

susie-t99182007/03/20 00:11:14ここでベストアンサー

コメント（3件)

この質問への反応（ブックマークコメント）