- ベストアンサー
JavaScriptでリセットボタンを押した時にラジオボタンの初期値を選択する方法
- JavaScriptを使用して、リセットボタンを押した時にラジオボタンの初期値を選択する方法について教えてください。
- ラジオボタンのグループは複数あり、name属性が"data[TestModel][field]"となっています。
- しかし、"document.form.data[ModelTest][field].value = 0"とするとエラーが発生します。どのようにすればラジオボタンにアクセスできますか？
- rufas
- お礼率75% (315/420)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No2様がご指摘のように、[ ]が配列とみなされてしまうのでしょう。 また、[ ]は本来はname属性には使えなかったような… デフォルトのチェックを明示していることが明らかであるなら、その要素を探してチェックすると言う方法が取れると思います。（reset1) [ ]を含めた文字列で名前を指定すれば、こちらでも取得可能なようです。(reset2) ただし、どのブラウザでもＯＫかは確認していません。 No2様もご指摘のように、個別のidがあるのならそれを使うのが簡単。 formの内容（要素）が決まっているのなら、順序（要素の順）で指定する方法でも可能かと。 reset1とreset2のサンプル。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function hoge(evt){ var t = evt.target || evt.srcElement; var i, e, elm = t.form.elements; for(i=0; e=elm[i++];) if(e.nodeName=="INPUT" && e.type=="radio" && e.defaultChecked) e.checked = true; } function fuga(evt){ var t = evt.target || evt.srcElement; var deflt = "data[TestModel][field]"; t.form.elements[deflt][0].checked = true; } //--> </script> </head> <body> <form action="#"> <p> <input type="radio" name="data[TestModel][field]" id="TestModelField0" value="0" checked> <label for="TestModelField0">指定なし</label> <input type="radio" name="data[TestModel][field]" id="TestModelField1" value="1" > <label for="TestModelField1">無</label> <input type="radio" name="data[TestModel][field]" id="TestModelField2" value="2" > <label for="TestModelField2">有</label> </p> <p> <input type="button" value="reset1" onclick="hoge(event);"> <input type="button" value="reset2" onclick="fuga(event);"> </p> </form> </body> </html>
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
checked="checked" のようにしょうりゃくもせずにあることだし、ここは そのふぉーむを、form.reset () するだけで・・・
お礼
ありがとうございます。 この方法でやってみたのですが、出来なかったのです… おそらく、このフォームの状態を保持したまま、 画面を更新する処理をphpでしているから？？だと思うのですが… ラジオボタン以外にもテキストボックスやセレクトボックスやチェックボックスがありますが、チェックやテキストがクリアされませんでした。 これで出来れば、ソースもすっきりすると思っていたので残念です。
- gokigen2525
- ベストアンサー率28% (2/7)
うーん、本来 [ ] は配列の個別オブジェクトを参照するものですからねぇ。 NAMEの data[TestModel][field] を data_TestModel_field あたりに変更したほうがよいかと思いますが、 変更が不可なら IDで参照したほうが安全かも var rdobtn = document.getElementById('TestModelField0'); rdobtn.checked;
- gokigen2525
- ベストアンサー率28% (2/7)
＞document.form.data[ModelTest][field].value = 0とするとエラーになってしまいます。 は ＜document.form.data[TestModel][field].value = 0とするとエラーになってしまいます。 ですよね？ それはそれとして document.form.data[TestModel][field][0].checked で動作しませんか？
お礼
ありがとうございます。 ご指摘ありがとうございます。 こちらでの入力ミスですので大丈夫です。 document.form.data[TestModel][field][0].checked で試したところ、IEからのエラーが表示されました。 document.form.data.TestModel' は Null またはオブジェクトではありません。 dataとTestModelが'.'で区切られているのが気になります。
お礼
ありがとうございます。 出来ました!! var deflt = "data[TestModel][field]"; この方法はいろいろ検索していた時に見つけていたのですが、 ""で囲むとしかかかれていなくて、指定の仕方を誤っていたようです。 t.form.deflt.checked = true; こうしていました。 var t = evt.target || evt.srcElement; これは、formにname属性がない時に使えそうですね。 javascriptも初心者なので、知りませんでした…