- ベストアンサー
ラジオボタンでチェックボックスの制限をする方法
- JavaScriptを使用して、ラジオボタンの選択に応じてチェックボックスの制限を設定する方法について教えてください。
- 申し込みフォームで、りんごを選んだ場合は1つのチェックボックスしか選択できないようにし、みかんを選んだ場合は2つのチェックボックスしか選択できないようにしたいです。
- 選択制限を超えた場合にはアラートを表示したいです。どのように実装すればよいでしょうか？
- koji60ja
- お礼率100% (13/13)
- JavaScript
- 回答数4
- ありがとう数13
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1です。nameを合わせてみました。 ついでに、多すぎるチェックしかしてませんでしたが、少ない場合のチェックも追加しました。（質問の要件を見落としてました） 送信する時だけ少ないケースもチェック。 送信ボタン契機でアラートを出した場合はフォームが送信されないようにしています。 <script type="text/javascript"> function sample(Submit){ var kosuu = { 'りんご':1, 'みかん':2, }; var count = 0; var fld3 = document.getElementsByName('fld3[]'); for(i=0;fld3[i];i++) if(fld3[i].checked) count++; var fld1 = document.getElementsByName('fld1'); for(i=0;fld1[i];i++) { if(fld1[i].checked) { if(count > kosuu[fld1[i].value] ) { alert('選択産地が多すぎです。'+kosuu[fld1[i].value]+'個選んでください。'); return false; } else if(Submit && count < kosuu[fld1[i].value]){ alert('選択産地が足りません。'+kosuu[fld1[i].value]+'個選んでください。'); return false; } break; } } return true; } </script> </head> <body> <form onsubmit="return sample(true)"> <p> <label><input type="radio" name="fld1" value="りんご" onclick="sample()">りんご</label> <label><input type="radio" name="fld1" value="みかん" onclick="sample()">みかん</label> </p> <p> <label><input type="checkbox" name="fld3[]" value="" onclick="sample()">青森産</label> <label><input type="checkbox" name="fld3[]" value="" onclick="sample()">愛媛産</label> <label><input type="checkbox" name="fld3[]" value="" onclick="sample()">千葉産</label> </p> <p><input type="submit"></p> </form>
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
使う要素を変えればスクリプトの中身も多少違ってきます。 selectにした場合のサンプルは以下 <script type="text/javascript"> function sample(Submit){ var kosuu = { 'りんご':1, 'みかん':2, }; var count = 0; var fld3 = document.getElementsByName('fld3[]'); for(i=0;fld3[i];i++) if(fld3[i].checked) count++; var fld1 = document.getElementsByName('fld1')[0]; if(count > kosuu[fld1.value] ) { alert('選択産地が多すぎです。'+kosuu[fld1.value]+'個選んでください。'); return false; } else if(Submit && count < kosuu[fld1.value]){ alert('選択産地が足りません。'+kosuu[fld1.value]+'個選んでください。'); return false; } return true; } </script> </head> <body> <form onsubmit="return sample(this)"> <p><select name="fld1" onchange="sample()" > <option value="りんご">りんご</option> <option value="みかん">みかん</option> </select> </p> <p> <label><input type="checkbox" name="fld3[]" value="" onclick="sample()">青森産</label> <label><input type="checkbox" name="fld3[]" value="" onclick="sample()">愛媛産</label> <label><input type="checkbox" name="fld3[]" value="" onclick="sample()">千葉産</label> </p> <p><input type="submit"></p> </form>
お礼
朝早くから本当にありがとうございました。 あと少しで完成しそうです。セレクトボックスの方法もご教授いただき感謝致します。 今は、同じフォーム内で教えていただいた １．ラジオボタンの選択によってチェックボックスの個数制限→OK ２．セレクトボックスの選択によってチェックボックスの個数制限→NG といった状況です。別々のフォームにすればもちろん動きます。 朝からとほほなどを参考にして勉強しております。明日、質問を締め切りさせて いただきます。同じフォームで動かすのは素人には難しいです（泣）
補足
steel_gray様 本当にお世話になりました。 すべてうまく動くことに成功しました。初めてjavascriptなるものにチャレンジしてみましたがお陰さまでうまく同一フォームで、２つの項目チェックを動かすことができました。 以下ソースです。文法的に合っているか微妙？？？ですが、formのonsubmitを&&でつなげてみました。 <form onsubmit="return (keisan(true)&&dai2shouhin(this))"> 省略（教えていただいたセレクトボックスの処理とラジオボタンの処理を書きました） </form> javascriptは、教えていただいたものを２つ以下のような感じで書きました。 <!-- 第一商品個数チェック --> <script type="text/javascript"> function keisan(Submit){ var kosuu = { 'みかん':1, 'りんご':2, }; var count = 0; var fld3 = document.getElementsByName('fld3[]'); for(i=0;fld3[i];i++) if(fld3[i].checked) count++; var fld1 = document.getElementsByName('fld1'); for(i=0;fld1[i];i++) { if(fld1[i].checked) { if(count > kosuu[fld1[i].value] ) { alert('選択産地が多すぎです。'+kosuu[fld1[i].value]+'個選んでください。'); return false; } else if(Submit && count < kosuu[fld1[i].value]){ alert('選択産地が足りません。'+kosuu[fld1[i].value]+'個選んでください。'); return false; } break; } } return true; } </script> <!-- 第一商品個数チェック終了--> <!-- 第二商品個数チェック --> <script type="text/javascript"> function dai2shouhin(Submit){ var kosuu = { 'みかん':1, 'りんご':2, }; var count = 0; var fld6 = document.getElementsByName('fld6[]'); for(i=0;fld6[i];i++) if(fld6[i].checked) count++; var fld5 = document.getElementsByName('fld5')[0]; if(count > kosuu[fld5.value] ) { alert('選択産地が多すぎです。'+kosuu[fld5.value]+'個選んでください。'); return false; } else if(Submit && count < kosuu[fld5.value]){ alert('選択産地が足りません。'+kosuu[fld5.value]+'個選んでください。'); return false; } return true; } </script> <!-- 第二商品個数チェック終了 --> 心より感謝申し上げます。 本当にありがとうございました。 また、この場を借りて、zeff様にも御礼申し上げます。 かなり参考になりました。ありがとうございます。
- zeff
- ベストアンサー率69% (137/198)
産地をチェックしてからフルーツをチェックしなおすと、 産地をチェックできる個数に不整合が生じるので、 フルーツチェックしたら必ず産地チェックをクリアするようにしました。 またフルーツをチェックしないで産地をチェックするとアラートしてクリア、 個数をオーバーするとアラートしてクリアします。 fld3[]についてはわかりません。 onsubmitがそもそもよくわからない； 参考： http://www.tagindex.com/javascript/form/check5.html <script type="text/javascript"> <!-- var max = new Array(1,2,3,4); var L,FL; var i,cnt = 0; function fldClr(){ L = document.form1.fld3.length; for( i=0; i < L; i++){ document.form1.fld3[i].checked = false; } cnt = 0; } function check(){ var m,flag = 0; FL = document.form1.fruit.length; for( i=0; i < FL; i++){ if( document.form1.fruit[i].checked ){ flag = 1; m = max[i]; break; } } if( flag == 0 ){ alert("フルーツを選択して下さい。"); fldClr(); }else{ cnt++; if ( cnt > m ){ alert( m + "つまでしか選べません。"); fldClr(); }else{ return true; } } } // --> </script> </head> <body> <form method="POST" action="example.cgi" name="form1" onsubmit="return check()"> <p> <label><input type="radio" name="fruit" value="りんご" onclick="fldClr()">りんご</label> <label><input type="radio" name="fruit" value="みかん" onclick="fldClr()">みかん</label> <label><input type="radio" name="fruit" value="めろん" onclick="fldClr()">めろん</label> <label><input type="radio" name="fruit" value="すいか" onclick="fldClr()">すいか</label> </p> <p> <label><input type="checkbox" name="fld3" value="青森産" onclick="check()">青森産</label> <label><input type="checkbox" name="fld3" value="愛媛産" onclick="check()">愛媛産</label> <label><input type="checkbox" name="fld3" value="千葉産" onclick="check()">千葉産</label> <label><input type="checkbox" name="fld3" value="神奈川産" onclick="check()">神奈川産</label> </p> <p><input type="submit" value="送信"></p> </form> </body> </html>
お礼
何から何までありがとうございます。心より感謝しております。 まだ[]の謎が解けませんが頑張ってみようと思います。 今週いっぱい質問受け付けて[]が解決できなくてもベストアンサーにさせて いただきます。お忙しい中ありがとうございました。
補足
今書いてくださったソースを試してみたところ、 同じ項目にチェックをするとアラートが上がってしまいました。 こちらの方ももう少し頑張ってみようと思います。 お忙しい中ありがとうございます。
- steel_gray
- ベストアンサー率66% (1052/1578)
以下、さんぷる <script type="text/javascript"> function sample(){ var kosuu = { 'りんご':1, 'みかん':2, }; var count = 0; var sanchi = document.getElementsByName('sanchi'); for(i=0;sanchi[i];i++) if(sanchi[i].checked) count++; var fruit = document.getElementsByName('fruit'); for(i=0;fruit[i];i++) { if(fruit[i].checked) { if(count > kosuu[fruit[i].value] ) { alert('産地のチェックおおすぎ '+kosuu[fruit[i].value]+'個まで'); return false; } else break; } } return true; } </script> </head> <body> <form onsubmit="return sample()"> <p> <label><input type="radio" name="fruit" value="りんご" onclick="sample()">りんご</label> <label><input type="radio" name="fruit" value="みかん" onclick="sample()">みかん</label> </p> <p> <label><input type="checkbox" name="sanchi" value="" onclick="sample()">青森産</label> <label><input type="checkbox" name="sanchi" value="" onclick="sample()">愛媛産</label> <label><input type="checkbox" name="sanchi" value="" onclick="sample()">千葉産</label> </p> <p><input type="submit"></p> </form>
お礼
迅速なご回答ありがとうございます。大変感謝しております。 サンプル通りに動かすことができましたが、思わぬエラーになってしまいました。 というのは、産地のnameが fld3[]という形にしなければならず、これだと動きません。 たぶん、[]があるのでjavascriptで配列？として読み取ってしまうようです。 色々と今サイトを見て解決策を探しております。 var count = 0; var fld3[] = document.getElementsByName('fld3[]'); for(i=0;fld3[][i];i++) if(fld3[][i].checked) count++; var fld1 = document.getElementsByName('fld1'); for(i=0;fld1[i];i++) { if(fld1[i].checked) { if(count > kosuu[fld1[i].value] ) { alert('選択産地が多すぎです。'+kosuu[fld1[i].value]+'個選んでください。'); return false; } else break; } } return true; } </script>
お礼
#1様 今、気付きました。#2の方と間違えておりました。#2の方も本当にありがとうございます。 お二人ともご回答してくださっていたようで早とちりしてしまいました。 ベストアンサーに関しては、再度ご検討させていただきます。 なお、大変素晴らしいソースでびっくりしました。もっともっと勉強する必要があると思います。これで何ら問題なく動いております。足りない場合のアラートすごく気に入りました。感謝しております。 最後に、１つだけ疑問があるのですが、オプション（プルダウンのときは）onclickでは なく、onChangeにして同じようにしているのですが、うまく動かない現象になっています。 お時間を使わせてしまうのは申し訳ないのですが、お時間のあるときで 結構ですので分かるようでしたら一言でも結構ですのでヒントをいただけると助かります。