プロが教えるわが家の防犯対策術！

リンク文字クリックでラジオボタン選択、テキストボックス表示したい

解決済

  • 質問者：litton101
  • 質問日時：
  • 回答数：2件

次のようにハイパーリンク文字列、ラジオボタン、テキストボックスが並んでいます。

<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="#">とすると画面を再読み込みしてしまうようなので、
再読み込みされない書き方についてもご教示いただけますとまことに
幸いです。よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1

  • 回答者： steel_gray
  • 回答日時：

まず、ラジオボタンやチェックボックスに対応するラベルは<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>

参考URL：http://www.tohoho-web.com/html/label.htm
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速のご教示ありがとうございました。
作っていただいたサンプルもさることながら、
「リンクでないもののアンカーはNG」というのは
大変勉強になりました。
わたしには発想がなかったです（＾＾ゞ

動作確認の方もバッチリでした。
本当にありがとうございました。

通報する
お礼日時：2005/08/29 22:28

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

とりあえず、普通に書くとこんなかんじでしょうか。



<html>
<body>
<form>
<a href="javascript:setFruit('0','りんご')">りんご</a>
<a href="javascript:setFruit('1','みかん')">みかん</a>
<a href="javascript:setFruit('2','いちご')">いちご</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>
</form>
<script language="javascript">
function setFruit(num1,num2){
//alert(1);
var f=document.forms[0];
f.select[num1].checked=true;
f.label.value=num2;
}
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速のご教示ありがとうございます。
＃１さんのものもバッチリですが、
ハイパーリンクに設定しているCSSを適用
したいので、アンカーを残して実現いただけたのは
大変ありがたいです。

大変助かりました。本当にありがとうございました。

通報する
お礼日時：2005/08/29 22:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報