- ベストアンサー
複数のラジオボタンでの選択で、指定したリンクページへジャンプ
はじめまして。ミドリと申します。 JavaScriptで以下のようなものが使用したくて調べてみたのですが、ツリーメニューや１つを選択してジャンプ、というものしか見つけられず、ぜひ教えを乞いたく参りました。 どうぞ宜しくお願い致します。 ラジオボタンを複数用意して、選択した項目によってそれぞれ別のリンクへと飛ばすといった具合になります。 【 例 】 （１）１つめを選択してください。（メイン） ○Ａ ○Ｂ ○Ｃ （２）２つめを選択してください。（サブ） ○Ｄ ○Ｅ ○Ｆ ○Ｇ 【ＯＫ】 ――― ・ＡとＤ → リンク／ページ１へ ・ＡとＥ → リンク／ページ２へ ・ ・ ・ＣとＧ → リンク／ページ１２へ このような感じになります。 もしかしたら、ものすごく難しいことなのかもしれない…―とそれすら分からない、JavaScriptかじりたての初心者ですが、もし沿うものがございましたらどうぞ宜しくお願い致します。 大変お手数をお掛け致します。
- okpokapoka
- お礼率65% (19/29)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<script language="javascript"><!-- //リンク先の設定（URL） al=new Array(); al[0]="http://yahoo.co.jp/";//A+D al[1]="http://google.co.jp/";//A+E al[2]="http://www.goo.ne.jp/";//A+F al[3]="";//A+G al[4]="";//B+D //(略) al[11]="";//C+G(※この場合は0～11の値が入ります) function xLunch(){ aUe = document.getElementsByName("ue"); aSita =document.getElementsByName("sita"); for(i=0;i<aUe.length;i++){ if(document.getElementsByName("ue")[i].checked==true){ nUeSel=i; break; } } for(i=0;i<aSita.length;i++){ if(document.getElementsByName("Sita")[i].checked==true){ nSitaSel=i+1; break; } } nC = (aSita.length*nUeSel)+nSitaSel; location.href=al[nC-1]; } --> </script> <table border="1"> <tbody> <tr> <td>一つ目を選択してください。</td> </tr> <tr> <td><input type="radio" name="ue" checked>A <input type="radio" name="ue">B <input type="radio" name="ue">C</td> </tr> <tr> <td>二つ目を選択してください。</td> </tr> <tr> <td><input type="radio" name="sita" checked>D <input type="radio" name="sita">E <input type="radio" name="sita">F <input type="radio" name="sita">G </td> </tr> <tr> <td align="right"><input type="button" value=" OK " onclick="xLunch()"></td> </tr> </tbody> </table> 一番最初の部分にジャンプ先のURLを一つずつ指定できます。（末尾の組み合わせ参考） ラジオボタンも好きなように量を変えることができます。
その他の回答 (1)
JavaScript Sample: <script type="text/javascript"> <!-- window.onload = function(){ document.forms[0]["OK"].onclick = function(){ var DIRs = document.forms[0]["dir"]; var FILEs = document.forms[0]["file"]; function getCheckedElement(nl){ for(var i=0;i<nl.length;i++){ if(nl[i].checked) return nl[i]; } } var DIR = getCheckedElement(DIRs).value; var FILE = getCheckedElement(FILEs).value; URL = './' + DIR + '/' + FILE + '.html'; alert(URL+"をリクエストします"); window.location = URL; } } //--> </script> <body> <form action="javascritp:void(0)"> （１）ディレクトリを選択してください。 <input type="radio" name="dir" value="dir1">dir1 <input type="radio" name="dir" value="dir2">dir2 <input type="radio" name="dir" value="dir3">dir3 （２）ファイルを選択してください。 <input type="radio" name="file" value="file1">file1 <input type="radio" name="file" value="file2">file2 <input type="radio" name="file" value="file3">file3 <input type="radio" name="file" value="file4">file4 <input type="radio" name="file" value="file5">file5 <input type="button" name="OK" value="OK"> </form> </body>
お礼
お返事が大変遅くなりまして申し訳ございません。 この度は回答をいただきありがとうございました。 いただきましたスクリプトも試させていただきたいと思います。 ありがとうございました。
お礼
お返事が大変遅くなりまして申し訳ございません。 この度はとても分かりやすく丁寧な回答をありがとうございました。 いただいたスクリプトで早速試してみたいと思います。 本当にありがとうございました。