• ベストアンサー

文字列を表示/非表示させつつ、ラジオボタンを選択

665の回答

  • ベストアンサー
  • 665
  • ベストアンサー率72% (18/25)
回答No.1

このような感じでしょうか? 説明からクリックしたテーブルの三角1つだけが表示されると判断しました。 <html><head> <style type="text/css"> #rdmenu0, #rdmenu1 { visibility: hidden; } </style> <script type="text/javascript"> <!-- var radio = new Array(1, 1, 1); var selectNum = 0; function setRadio(num){ var obj = document.all || document.getElementById; if (obj) { if (num == selectNum) { radio[num] ^= 1; obj("rdmenu" + selectNum).innerHTML = radio[num] ? "▲" : "▼"; } else { obj("rdmenu" + selectNum).style.visibility = "hidden"; selectNum = num; obj("rdmenu" + selectNum).style.visibility = "visible"; } document.query.select[num * 2 + radio[num]].checked = true; } } //--> </script> </head><body> <form id="query" name="query"> <table border="1"> <tr> <td onclick="setRadio(0)">いちご<span id="rdmenu0">▼</span></td> <td onclick="setRadio(1)">みかん<span id="rdmenu1">▼</span></td> <td onclick="setRadio(2)">りんご<span id="rdmenu2">▼</span></td> </tr> </table> <input type="radio" name="select" value="ichigo_up" checked >いちご▲ <input type="radio" name="select" value="ichigo_dw">いちご▼ <input type="radio" name="select" value="mikan_up">みかん▲ <input type="radio" name="select" value="mikan_dw">みかん▼ <input type="radio" name="select" value="ringo_up">りんご▲ <input type="radio" name="select" value="ringo_dw">りんご▼ </form> </body></html>

litton101
質問者

お礼

665さん、ご教示ありがとうございます。 本当に感謝に絶えません。 動作確認もバッチリでした。 #2さんのものをあわせて参考にし、 うまく応用して、組み込ませていただきます。

関連するQ&A

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

    次のようにハイパーリンク文字列、ラジオボタン、テキストボックスが並んでいます。 <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="#">とすると画面を再読み込みしてしまうようなので、 再読み込みされない書き方についてもご教示いただけますとまことに 幸いです。よろしくお願い致します。

  • チェックボックス/ラジオボタン

    CGIを勉強中です。 まだ無料で配布されているCGIをカスタムするくらいしかできないレベルです。 今度やりたいのが、チェックボックス/ラジオボタンどじらでもいいのですが、 こちらに送られてくるメールフォームで選択されているものは仮に「Y」 選択されていないものは「N」という形で受け取りたい場合はどのように したらできるのでしょうか? よろしくお願いします。 <input type="checkbox" name="みかん" value="みかん" />みかん <input type="checkbox" name="りんご" value="りんご" />りんご <input type="checkbox" name="メロン" value="メロン" />メロン <input type="radio" name="みかん" value="みかん">みかん  <input type="radio" name="りんご" value="りんご">りんご

    • ベストアンサー
    • CGI
  • ラジオボタン選択で「複数ラジオボタン」をアクティブにするには?

    ■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 (ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効) 用途はアンケートフォームです。 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form2" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、ラジオボタン(カテゴリー1~4)がアクティブになる。 </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">カテゴリー1 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー2 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー3 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー4 </td> </tr> </table> </form>

  • データベースの値を判断してラジオボタンにセットする方法

    Javaサーブレット&JSPで開発しています。 HTMLフォームよりラジオボタンを選択して、その内容をデータベースに登録します。 <input type=radio name=xxxx value=1>りんご <input type=radio name=xxxx value=2>みかん <input type=radio name=xxxx value=3>ばなな 上記の例だと、りんごを選択したとき、データベース上のxxxxには、1を登録します。 その後、変更時には下記のように登録した内容を画面にラジオボタン形式で表示させたいのですがどのように記述すればよいでしょうか? <input type=radio name=xxxx value=1 checked>りんご <input type=radio name=xxxx value=2>みかん <input type=radio name=xxxx value=3>ばなな

    • ベストアンサー
    • Java
  • 5問択2のラジオボタンは作れますか。

    5問のうち2つ選択するラジオボタンを作る方法はあるのでしょうか。 JavaScript自体は意識して勉強したことがないのですが、 以下のような構文しか思いつきません。 <input type="radio" name="question1" value="1">いちご <input type="radio" name="question1" value="2">オレンジ <input type="radio" name="question1" value="3">桃 <input type="radio" name="question1" value="4">バナナ <input type="radio" name="question1" value="5">パナップル 出来る方法などご存知の方おられましたら幸いです。

  • ラジオボタンを選択すると、他のラジオボタンの動きを制御したい

    radio1~radio3のいずれか「はい」を選択すると、 その他が強制的に「いいえ」に切り替わるスクリプトはどのように作成すればよろしいでしょうか? <INPUT TYPE=radio NAME="radio1" VALUE="1">はい <INPUT TYPE=radio NAME="radio1" VALUE="2">いいえ <INPUT TYPE=radio NAME="radio2" VALUE="1">はい <INPUT TYPE=radio NAME="radio2" VALUE="2">いいえ <INPUT TYPE=radio NAME="radio3" VALUE="1">はい <INPUT TYPE=radio NAME="radio3" VALUE="2">いいえ

  • ラジオボタンでの表示の切替方法

    2つのラジオボタンの切替によって、表示の切替を行いたいです。 例えば、Aを選択すると(1)の入力フォームが表示され、Bを選択すると(2)が表示したいです。初期表示はAが選択された時と同じ内容となります。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td><form name="Quick1"> <tr><td>選択</td> <td> <input type="radio" name="A" value="1" checked>A  <input type="radio" name="B" value="2">B  </td></tr> <tr> <td>(1)</td> <td> <input type="text" size="6" maxlength="5" name="text1" value="">- <input type="text" size="6" maxlength="5" name="text2" value="">- <input type="text" size="6" maxlength="5" name="text3" value=""> </td></tr> <tr> <td>(2)</td> <td> <input type="text" name="text7" size="43" value=""> </td></tr> </table></form></td></tr></table> すみませんが、よろしくお願い致します。

  • ラジオボタン選択でtextfieldをアクティブにするには?

    ■下記サンプルソースのラジオボタン「はい」を選択するとtextfieldがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 (ページ開いた際は「いいえ checked」でtextfieldはグレーで入力無効) 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form1" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、textfield(カテゴリー1~4)がアクティブになる</td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい  <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> カテゴリー1<input name="textfield" type="text" size="30" maxlength="30"> <br> カテゴリー2 <input name="textfield22" type="text" size="30" maxlength="30"> <br> カテゴリー3 <input name="textfield32" type="text" size="30" maxlength="30"> <br> カテゴリー4 <input name="textfield42" type="text" size="30" maxlength="30"> </td> </tr> </table> </form>

  • フォームで選択がひとつも無かった場合アラートを表示

    以下のような内容でひとつもチェックが無かった場合、 送信時に「1項目以上選択してくさい」というアラートを表示させたいのですが、 他のサイトで調べても、希望通りのものがなく困っております。 ■選択A <input type="checkbox" name="A" value="りんご">りんご <input type="checkbox" name="A" value="みかん">みかん <input type="checkbox" name="A" value="いちご">いちご ■選択B <input type="checkbox" name="B" value="テレビ">りんご <input type="checkbox" name="B" value="冷蔵庫">みかん <input type="checkbox" name="B" value="洗濯機">いちご ■選択C <select name="C"> <option value="" selected="selected">選択C</option> <option value="車">車</option> <option value="バイク">バイク</option> <option value="自転車">自転車</option> checkboxやselectなどinputの種類を問わず、 全ての項目の中から1つ以上の選択が合った場合送信して、 無かった場合はアラート表示させる方法をご存知の方いらっしゃいましたらご教授ください。 どうぞ宜しくお願いいたします。

  • クリックしたラジオボタンの行番号を取得したい

    Jqueryを用いてクリックしたラジオボタンの行番号を取得したいのですが、 うまくいきません。 次のようなHTMLで <table border="1" style="font-size:12px;"> <tr> <td>2014年06月01日</td> <td> <label><input type="radio" name="rd1" class="rd" value="0" />A</label> <label><input type="radio" name="rd1" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd1" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月02日</td> <td> <label><input type="radio" name="rd2" class="rd" value="0" />A</label> <label><input type="radio" name="rd2" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd2" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月03日</td> <td> <label><input type="radio" name="rd3" class="rd" value="0" />A</label> <label><input type="radio" name="rd3" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd3" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月04日<td> <td> <label><input type="radio" name="rd4" class="rd" value="0" />A</label> <label><input type="radio" name="rd4" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd4" class="rd" value="7" />C</label> </td> </tr> </table> 下記で選択したラジオボタンの値を取得できるのですが、 行の番号が取れません。 //ラジオボタンを変更 $('.rd').change(function(){ val = $(this).val(); alert("hoge " + val); }); どのようにしたら良いでしょうか? 宜しくお願いいたします。