• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:javascript ラジオボタン)

JavaScriptのラジオボタンを使用したフォームの表示・非表示を制御する方法

このQ&Aのポイント
  • JavaScriptを使って、フォーム内のラジオボタンの選択に応じて要素の表示・非表示を制御する方法について質問です。
  • 具体的な例として、テーブルを使った簡単なフォームを作成し、選択されたラジオボタンに応じてテキストフィールドを表示・非表示にする方法を知りたいです。
  • また、PHPと連携して、URLパラメータを使って初期の表示状態を設定する方法も教えていただけると助かります。

質問者が選んだベストアンサー

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 以下のような感じではどうでしょうか。 (表示非表示の値がradioの値と差異があったので勝手にあわせてしまいました) phpの$strは$_GET['str']の値で、""の場合は2にしています。 ==== script部分 <script type="text/javascript"> window.onload = function() { var disp = document.getElementsByName('disp'); setDisp ( '<?= $str ?>' ); for ( var i = 0; i < disp.length; i ++ ) { disp[i].onclick = function() { setDisp ( this.value ); }; } }; function setDisp ( value ) { document.getElementById('area').style.display = value === '2' ? 'none' : 'block'; } </script> ==== html部分 <table> <tr> <td>表示/非表示<td> <td><input name="disp" type="radio" value="2"<?= $str === '2' ? ' checked="checked"' : '' ?>>非表示 <input name="disp" type="radio" value="1"<?= $str === '1' ? ' checked="checked"' : '' ?>>表示<td> <tr> <!--ここから表示/非表示部分--> <tr id="area"> <td>テキスト<td> <td><input type="text"><td> <tr> <!--ここまで表示/非表示部分--> </table>

taabooo
質問者

お礼

ご返答遅れて申し訳ございません ありがとうございます!! できました! 本当にソースをそのままいただき助かりました。 また何かありましたらよろしくお願い致します。

関連するQ&A