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

ベストアンサー

id:susie-t No.2

susie-t回答回数99ベストアンサー獲得回数182007/03/20 00:11:14

ポイント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") &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

id:vanda

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

丁寧な回答感謝です!!

--

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

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

2007/03/20 02:59:47

その他の回答(1件)

id:susie-t No.1

susie-t回答回数99ベストアンサー獲得回数182007/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

id:vanda

ありがとうございます。

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

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

2007/03/19 20:07:03
id:susie-t No.2

susie-t回答回数99ベストアンサー獲得回数182007/03/20 00:11:14ここでベストアンサー

ポイント100pt

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

id:vanda

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

丁寧な回答感謝です!!

--

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

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

2007/03/20 02:59:47
  • id:susie-t
    お役に立てて幸いです。
    すみません、二番目の回答、関数funcの第一引数eventは不要でした。(使うつもりで書いたら、使わなかった^^;)
    動作上問題はありませんが。気になったら削除してください。
  • id:vanda
    どうもご丁寧にありがとうございます。
    スクリプトは初心者なので(汗)唸りながら悩んでおりましたが
    こういうとき、susie-t のような方に巡りあえるので、はてなを重宝しています。サイトも拝見しました。JavaScriptの勉強をさせてもらいに、時々覗かせていただこうと思います。^^
  • id:vanda
    すみません、呼び捨てしてしまいました。
    susie-tさん、ありがとうございました。

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません