- ベストアンサー
ラジオボタン選択で「複数ラジオボタン」をアクティブにするには？
■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになる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>
- kato96
- お礼率58% (32/55)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
カテゴリーが違うのに同じ名前を使うと使い勝手が悪いです ＃１さんのようにわけてかくといいですね。 こんな感じで、オブジェクトを引数で渡すと比較的 ローレベルのjavascriptで動作します。 <script language="javascript"> function changeRadio(num1,num2){ var f=num1.form for(var i=0;i<f.length;i++){ if (f.elements[i].name==num2) f.elements[i].disabled=((num1.value=="yes")?false:true) } } </script> <form name="form2" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、ラジオボタン（カテゴリー1～4）がアクティブになる。 </td> </tr> <tr> <td> <input name="radioSelect" type="radio" value="yes" onclick="changeRadio(this,'radiocategory')">はい <input name="radioSelect" type="radio" value="no" checked onclick="changeRadio(this,'radiocategory')">いいえ </td> </tr> <tr> <td> <input name="radiocategory" type="radio" value="category1" disabled>カテゴリー1 <input name="radiocategory" type="radio" value="category2" disabled>カテゴリー2 <input name="radiocategory" type="radio" value="category3" disabled>カテゴリー3 <input name="radiocategory" type="radio" value="category4" disabled>カテゴリー4 </td> </tr> </table> </form>
その他の回答 (2)
- papillon68
- ベストアンサー率61% (42/68)
kato96さんこんにちは、papillon68と申します。 入力可/不可の切替えはBLUEPIXYさんのサンプルであるように「disabled」を使います。(enabledの操作のイメージ) ラジオボタンの他にも 「テキスト」、「チェックボックス」、「プルダウン」、「ボタン」などでも行えます。 参考URLで入力可/不可を切り替えるサンプルが掲載されています。 また、参考サイトではその他にも色々なサンプルがあるので役立つかもしれません(@＾－＾@)
- 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>Sample</title> <style> <!-- h1.title { font: bolder xx-large Arial,sans-serif; } --> </style> <script type="text/javascript"> <!-- function activate(formName){ var f=document.getElementsByName(formName); for(var i=0;i<f.length;i++){ f[i].disabled=false; } } function disable(formName){ var f=document.getElementsByName(formName); for(var i=0;i<f.length;i++){ f[i].disabled=true; } } //--> </script> </head> <body> <form name="form2" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、ラジオボタン（カテゴリー1～4）がアクティブになる。 </td> </tr> <tr> <td> <input name="radioSelect" type="radio" value="yes" onclick="activate('radiocategory')">はい <input name="radioSelect" type="radio" value="no" checked onclick="disable('radiocategory')">いいえ </td> </tr> <tr> <td> <input name="radiocategory" type="radio" value="category1" disabled>カテゴリー1 <input name="radiocategory" type="radio" value="category2" disabled>カテゴリー2 <input name="radiocategory" type="radio" value="category3" disabled>カテゴリー3 <input name="radiocategory" type="radio" value="category4" disabled>カテゴリー4 </td> </tr> </table> </form> </body> </html>
