- ベストアンサー
ラジオボタンの選択によって、スタイルシートを使い分けたい
- PHPのフォームでラジオボタンの選択に応じて、スタイルシートを使い分けたい場合、どのような制御文を使用すれば良いのでしょうか？具体的な方法やコードの例など、詳しいご指導をお願いします。
- ラジオボタンの選択によってスタイルシートを使い分けたい場合、PHPのフォームを使用して、AとBの2つの選択肢を用意し、それぞれの選択肢に対応するスタイルシートを設定する方法があります。具体的な手順やコードの例など、わかりやすくご説明お願いします。
- ラジオボタンの選択に応じてスタイルシートを使い分ける方法についてご質問です。フォームでラジオボタンAとBの選択肢があり、Aを選択した場合はBブロックを非表示にして、Bを選択した場合はAブロックを非表示にしたいです。具体的な手順やコードの例など、ご教授いただけると助かります。
- MMM-SRV
- お礼率86% (32/37)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
if(pra=="0"){ priMenu[0].style.display="block"; priMenu[1].style.display="none"; } if(pra=="1"){ priMenu[0].style.display="none"; priMenu[1].style.display="block"; } なお、蛇足ですが、スクリプト部分は <script type='text/javascript'> <!-- --> </script> で囲んで下さいね
その他の回答 (1)
- 7thHEAVEN
- ベストアンサー率33% (1/3)
ベタですが、こんな感じでどうですか？ <HTML> <HEAD> <script type="text/javascript"><!-- function expriMenu(pra){ var block1 = document.getElementById('priMenu1'); var block2 = document.getElementById('priMenu2'); if(pra=="0"){ block2.style.visibility = 'hidden'; block1.style.visibility = 'visible'; } if(pra=="1"){ block1.style.visibility = 'hidden'; block2.style.visibility = 'visible'; } } --></script> </HEAD> <BODY> <form name='pri1'> <input type='radio' name='000' value='A' onClick="javascript:expriMenu(0);">A <input type='radio' name='000' value='B' onClick="javascript:expriMenu(1);">B <br> <br> <br> <br> <DIV id=priMenu1> ブロックＡ </DIV> <DIV id=priMenu2> ブロックＢ </DIV> </form> </BODY> </HTML>
補足
7thHEAVEN様 早速のご回答ありがとうございます。 早速、組み込んでみたのですが、スクリプトエラーになってしまいました。 以下のような形で組み込んでいますが、いけないところがありますでしょうか？？？ <HTML> <HEAD> <script language="javascript"> <!-- function expriMenu(pra){ var block1 = document.getElementById('priMenu1'); var block2 = document.getElementById('priMenu2'); if(pra=="0"){ block2.style.visibility = 'hidden'; block1.style.visibility = 'visible'; } if(pra=="1"){ block1.style.visibility = 'hidden'; block2.style.visibility = 'visible'; } --> </head> <BODY> <? print "<input type='radio' name='opn_f' value='0' ".$tmp_rdo[0]." onclick=\"javascript:expriMenu(0);\">A".$crlf; print "<input type='radio' name='opn_f' value='".$opn_f."' ".$tmp_rdo[1]." onclick=\"javascript:expriMenu(1);\">B".$crlf; print "<DIV id=priMenu1 style='DISPLAY: none'>".$crlf; print " 希望小売価格：<input type='text' name='hyojun_k' size='12' maxlength='10' value='".$hyojun_k."'>".$crlf; print "<font color='#FF0000'>（税抜）</font>".$crlf; print "</DIV>".$crlf; print "<DIV id=priMenu2 style='DISPLAY: none'>".$crlf; print "[ 参考価格 <input type='text' name='opn_pri' size='12' maxlength='10' value='".$opn_pri."'><font color='#FF0000'>(税抜)</font>]".$crlf; print "</DIV>".$crlf; ?> </BODY> </HTML>
お礼
BLUEPIXY様 すみません!!! style部分のデフォルトを変えておけばよかったのですね。 ありがとうございました!! 今後とも、宜しくお願い致します。 ----------------------------------------- <DIV id=priMenu style='DISPLAY: none'> ブロックＡ </DIV> ------------------------------------------ ↓ <DIV id=priMenu style='DISPLAY: inline'> ブロックＡ </DIV>
補足
BLUEPIXY様 早速のご回答ありがとうございました。 表示上、blockよりもinlineの方が都合が良かったので 変更させていただきましたが、希望通りの動きができました。 が、すみません!!もう1点。 この場合、ページを読み込んだデフォルトで有効にならないのですが、デフォルトで pra=="0" の表示にしたい場合はどのように記述すると良いのでしょうか？？？ function expriMenu(pra){ if(pra=="0"){ priMenu[0].style.display="inline"; priMenu[1].style.display="none"; } if(pra=="1"){ priMenu[0].style.display="none"; priMenu[1].style.display="inline"; } }