- ベストアンサー
ラジオボタンでの表示の切替方法
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> すみませんが、よろしくお願い致します。
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <script type="text/javascript"> function Sel(){ var obj=document.forms['Quick1'].elements['rad']; if(obj[0].checked){ document.getElementById('d1').style.display='block'; document.getElementById('d2').style.display='none'; } else{ document.getElementById('d1').style.display='none'; document.getElementById('d2').style.display='block'; } } </script> </head> <body> <table align="center" border="0" cellpadding="0" cellspacing="0"width=280> <tr><td><form name="Quick1">選択</td> <td> <input type="radio" name="rad" value="1" onclick="Sel()">A <input type="radio" name="rad" value="2" onclick="Sel()">B </td></tr> <tr> <td>(1)</td> <td> <div id="d1" style="display:block;"> <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=""> </div> </td></tr> <tr> <td>(2)</td> <td> <div id="d2" style="display:none;"> <input type="text" name="text7" size="43" value=""> </div> </td></tr> </table></form></td></tr></table> </body> </html>
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>ラジオボタンによるフォームの切換</title> <script type="text/javascript"><!-- function Sel(me){ if(me.value=="1"){ me.form.text1.disabled=false; me.form.text2.disabled=false; me.form.text3.disabled=false; me.form.text7.disabled=true; document.getElementById('SelA').style.display=(document.all)? 'block':'table-row'; document.getElementById('SelB').style.display='none'; }else{ me.form.text1.disabled=true; me.form.text2.disabled=true; me.form.text3.disabled=true; me.form.text7.disabled=false; document.getElementById('SelA').style.display='none'; document.getElementById('SelB').style.display=(document.all)? 'block':'table-row'; } } //--> </script> </head> <body> <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td> <form name="Quick1"> <table> <tr> <td>選択</td> <td> <input type="radio" name="AB" value="1" checked onclick="Sel(this)">A <input type="radio" name="AB" value="2" onclick="Sel(this)">B </td></tr> <tr id="SelA"> <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 id="SelB" style="display:none"> <td>(2)</td> <td> <input type="text" name="text7" size="43" value="" disabled> </td></tr> </table> </form> </td></tr></table> </body> </html>
お礼
早速のご回答有難うございます。 参考にさせて頂きますので また何かあったらよろしくお願い致します。
お礼
ご回答の方有難うございます。 色々と方法があるのですね。 ご参考にさせて頂きます。 またよろしくお願い致します。