- ベストアンサー
文字列を表示/非表示させつつ、ラジオボタンを選択
つぎのテーブルがあります。 <html><head></head><body> <form id="query" name="query"> <table border="1"> <tr> <td>いちご▲▼</td> <td>みかん▲▼</td> <td>りんご▲▼</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> (1) 最初（画面読み込み時）はいちごの脇の「▼」１個だけが表示されている（他の▲は全部隠す） (2) いちごをクリックすると、▼は反転して▲になる (3) もう一回いちごをクリックすると、▲は反転して▼に戻る (4) つぎに、みかんをクリックするといちごの脇の▼は消え、みかんの脇に▼がでる (5) もう一回みかんをクリックすると、▼は反転して▲になる (6) さらに、りんごをクリックするとみかんの脇の▲は消え、りんごの脇に▼がでる (7) 別途、表示される6パターンに応じ、下にあるラジオボタンも適切なものが選択される …というような動作をさせたいのです。 どうぞ、よろしくお願い致します。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1612522 でも同じような質問を してしまい、すみません。もう少し吟味して、上記のようにしたいです。 よろしくお願い致します。
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
結構きたない書き方になっちゃったので＃１さんの方が よいかも。とりあえず参考までに （もしかして三角の指定が逆かも・・・・） <html> <body> <form id="query" name="query"> <table border="1"> <tr> <td><a href="javascript:view('ichigo')">いちご</a><a id="ichigo_0" style="display:none">▲</a><a id="ichigo_1" style="display:inline">▼</a></td> <td><a href="javascript:view('mikan')">みかん</a><a id="mikan_0" style="display:none">▲</a><a id="mikan_1" style="display:none">▼</a></td> <td><a href="javascript:view('ringo')">りんご</a><a id="ringo_0" style="display:none">▲</a><a id="ringo_1" style="display:none">▼</a></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> <script language="javascript"> function select_search(num){ var s=document.forms["query"].select; for (i=0;i<=s.length;i++){ if(s[i].value==num){ return i; } } } function clear(){ document.all.ichigo_0.style.display="none"; document.all.ichigo_1.style.display="none"; document.all.mikan_0.style.display="none"; document.all.mikan_1.style.display="none"; document.all.ringo_0.style.display="none"; document.all.ringo_1.style.display="none"; } function view(num){ if(document.all[num+"_0"].style.display=="none"){ clear(); document.all[num+"_0"].style.display="inline"; document.forms["query"].select[select_search(num+"_up")].checked=true; }else{ clear(); document.all[num+"_1"].style.display="inline"; document.forms["query"].select[select_search(num+"_dw")].checked=true; } } </script> </body> </html>
お礼
yambejpさん、いつもお世話になっています。 早速動作確認しましたが、もちろんバッチリでした。 ＃１さんのものをあわせて参考にし、 うまく応用して、組み込ませていただきます。 本当にありがとうございました。
お礼
665さん、ご教示ありがとうございます。 本当に感謝に絶えません。 動作確認もバッチリでした。 ＃２さんのものをあわせて参考にし、 うまく応用して、組み込ませていただきます。