- ベストアンサー
リンク文字クリックでラジオボタン選択、テキストボックス表示したい
次のようにハイパーリンク文字列、ラジオボタン、テキストボックスが並んでいます。 <html> <head></head> <body> <a href="#">りんご</a> <a href="#">みかん</a> <a href="#">いちご</a> <input type="radio" name="select" value="0" checked >りんご <input type="radio" name="select" value="1">みかん <input type="radio" name="select" value="2">いちご <input size="40" name="label" type="text" value="りんご" readonly> </body> </html> ここで、各ハイパーリンク文字列をクリックした瞬間に、 (1) 該当するラジオボタンが選択される (2) ラベルがテキストボックスに表示される というように動作させたいのです。 また、<a href="#">とすると画面を再読み込みしてしまうようなので、 再読み込みされない書き方についてもご教示いただけますとまことに 幸いです。よろしくお願い致します。
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
まず、ラジオボタンやチェックボックスに対応するラベルは<label>でマークアップしてください。 それだけでJavascriptをつかわずとも多くのブラウザではlabelに対応したinputをクリックしたのと同じ効果があります。参考URL また、リンクでないものをアンカー(<a>)でマークアップするのは望ましくありません。見た目だけでいいならスタイルシートでアンダーラインを付けるとか色を変えるとかしましょう。 以上を踏まえて。 <html> <head> <style type="text/css"> <!-- .textlabel {text-decoration:underline;} --> </style> <script type="text/javascript"> <!-- function labelView(O) { document.getElementById('label').value = O.firstChild.nodeValue; } //--> </script> </head> <body> <label for="select_0" onclick="labelView(this)" class="textlabel">りんご</label> <label for="select_1" onclick="labelView(this)" class="textlabel">みかん</label> <label for="select_2" onclick="labelView(this)" class="textlabel">いちご</label> <input type="radio" name="select" value="0" id="select_0" checked ><label for="select_0" onclick="labelView(this)">りんご</label> <input type="radio" name="select" value="1" id="select_1"><label for="select_1" onclick="labelView(this)">みかん</label> <input type="radio" name="select" value="2" id="select_2"><label for="select_2" onclick="labelView(this)">いちご</label> <input size="40" id="label" type="text" value="りんご" readonly> </body> </html>
お礼
早速のご教示ありがとうございました。 作っていただいたサンプルもさることながら、 「リンクでないもののアンカーはNG」というのは 大変勉強になりました。 わたしには発想がなかったです（＾＾ゞ 動作確認の方もバッチリでした。 本当にありがとうございました。
お礼
早速のご教示ありがとうございます。 ＃１さんのものもバッチリですが、 ハイパーリンクに設定しているCSSを適用 したいので、アンカーを残して実現いただけたのは 大変ありがたいです。 大変助かりました。本当にありがとうございました。