- ベストアンサー
selectした項目によって、radioボタンの値を変える方法
selectボックスの値によって、ラジオボタンに自動的にチェックを入れるというものを作りたいのですが、やり方がわからないのでどなたか回答をお願いします。 selectボックスは、 <select name="Q01" id="Q01"> <option selected>▼選択</option> <option value="1">Ａコース</option> <option value="2">Ｂコース</option> <option value="3">Ｃコース</option> </select> というようなものを用意しています。 ラジオボタンは、 <label for="Q02_1"> 有り<input name="Q02" type="radio" id="Q02_1" value="0" checked> </label> <label for="Q02_2"> 無し<input name="Q02" type="radio" id="Q02_2" value="1"> </label> <label for="Q03_1"> 有り<input name="Q03" type="radio" id="Q03_1" value="0" checked> </label> <label for="Q03_2"> 無し<input name="Q03" type="radio" id="Q03_2" value="1"> </label> <label for="Q04_1"> 有り<input name="Q04" type="radio" id="Q04_1" value="0" checked> </label> <label for="Q04_2"> 無し<input name="Q04" type="radio" id="Q04_2" value="1"> </label> ・ ・ ・ ・ というようなものを用意しています。 Ａコースを選ぶと、 Q02は「有り」、Q03は「無し」、Q04は「有り」 Ｂコースを選ぶと、 すべて「有り」 Ｃコースを選ぶと、 すべて「無し」 というような、コースによってラジオボタンにチェックが入るという仕組みです。 宜しくお願い致します。
- take2003
- お礼率25% (9/36)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
コースとラジオボックスが増える事を考えると こんなやり方の方が管理しやすいかもしれないですね。 ＃以下階層は全角空白で行っています。 ＃コピーする場合は、全角を半角などに変更してください。 <FORM name="SetForm"> <SELECT name="Q01" id="Q01" onChange="SetRadio();"> としておきます。 <SCRIPT LANGUAGE="JavaScript"> <!-- // コースによるラジオボックスの変更内容配列 var SET = new Array(); // SET[ コースのvalue ][ ラジオの項目名(name) ] = 選択する番号[0:有り 1:無し] // Ａコースの時 SET['1'] = new Array(); SET['1']['Q02'] = 0; SET['1']['Q03'] = 1; SET['1']['Q04'] = 0; // Ｂコースの時 SET['2'] = new Array(); SET['2']['Q02'] = 0; SET['2']['Q03'] = 0; SET['2']['Q04'] = 0; // Ｃコースの時 SET['3'] = new Array(); SET['3']['Q02'] = 1; SET['3']['Q03'] = 1; SET['3']['Q04'] = 1; function SetRadio() { with( document.SetForm ){ $num = Q01.options[Q01.selectedIndex].value; for (koumoku in SET[$num]) { elements[koumoku][SET[$num][koumoku]].checked = true; } } } //--> </SCRIPT> 連想配列を使ってややこしい書き方になってますが 基本概念として、関数自体を変更しないで データを変えるというやり方をしています。 私なら、SETを外部JavaScriptファイルで 設定しておいて、項目が増えたらそちらだけを 変更するというやり方をしますね。
その他の回答 (2)
これでどうですか？ テスト済みです☆ <html> <head> <script TYPE="text/javascript"> <!-- function f_change(a_value){ // Ｂ、Ｃコースは、Q04以上もたくさんあるようでしたので、ループにしてみました。 switch(a_value){ // Ａコース case "1" : f1.Q02_1.checked = true; f1.Q03_2.checked = true; f1.Q04_1.checked = true; break; // Ｂコース case "2" : for (i=2; i<=4; i++){ f1["Q0" + i + "_1"].checked = true; } break; // Ｃコース case "3" : for (i=2; i<=4; i++){ f1["Q0" + i + "_2"].checked= true; } break; // その他 default: // なにもしない } } --> </script> </head> <body> <form id="f1"> <select name="Q01" id="Q01" onchange="f_change(this.value)"> <option selected>▼選択</option> <option value="1">Ａコース</option> <option value="2">Ｂコース</option> <option value="3">Ｃコース</option> </select> <br> <label for="Q02_1"> 有り<input name="Q02" type="radio" id="Q02_1" value="0" checked> </label> <label for="Q02_2"> 無し<input name="Q02" type="radio" id="Q02_2" value="1"> </label> <br> <label for="Q03_1"> 有り<input name="Q03" type="radio" id="Q03_1" value="0" checked> </label> <label for="Q03_2"> 無し<input name="Q03" type="radio" id="Q03_2" value="1"> </label> <br> <label for="Q04_1"> 有り<input name="Q04" type="radio" id="Q04_1" value="0" checked> </label> <label for="Q04_2"> 無し<input name="Q04" type="radio" id="Q04_2" value="1"> </label> </body> </form> </html>
- Aquarius172
- ベストアンサー率36% (111/308)
次のようにすれば出来ますよ。 まず、<form>タグの[name]属性を指定します。 ここでは[QMAIN]とします。 次に、<select>タグに[onchange]イベントを追加します。 <select name="Q01" id="Q01" onchange="SetSelect(this.selectedIndex)"> そして次のスクリプトを追加します。 function SetSelect(index) { switch(index) { case 1: document.QMAIN.Q02_1.checked=true; document.QMAIN.Q02_2.checked=false; document.QMAIN.Q03_1.checked=false; document.QMAIN.Q03_2.checked=true; document.QMAIN.Q04_1.checked=true; document.QMAIN.Q04_2.checked=false; break; case 2: document.QMAIN.Q02_1.checked=true; document.QMAIN.Q02_2.checked=false; document.QMAIN.Q03_1.checked=true; document.QMAIN.Q03_2.checked=false; document.QMAIN.Q04_1.checked=true; document.QMAIN.Q04_2.checked=false; break; case 3: document.QMAIN.Q02_1.checked=false; document.QMAIN.Q02_2.checked=true; document.QMAIN.Q03_1.checked=false; document.QMAIN.Q03_2.checked=true; document.QMAIN.Q04_1.checked=false; document.QMAIN.Q04_2.checked=true; break; } } エラー処理はしてないので、適当に追加してください。 関数名(SetSelect)は適当に変えて大丈夫です。 私が、いつも参考にさせて頂いているHPを紹介しておきます。
- 参考URL：
- http://www.tohoho-web.com/
補足
回答ありがとうございます。 試してみます。 エラー処理をしないと不具合は起こるのでしょうか？
お礼
とても分かりやすい説明、ありがとうございました。 今試したところ問題なくできました。