javascriptからラジオボタンへのアクセス

解決済

質問者：rufas
質問日時：2011/07/28 09:41
回答数：4件

cakephpで以下のソースを書き、ラジオボタンタグを出力しました。
$form->create('name' => 'form')
$form->radio('TestModel.field',array('指定なし', '無', '有'), 'value' => 0));
$form->end();

----出力されたHTML（formタグなどは省略しています）------
<input type="radio" name="data[TestModel][field]" id="TestModelField0" value="0" checked="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>
--------------------------------

[リセット]ボタンのようなのを押した時に、'指定なし'の初期値を選択するようにしたいので、
javascriptでしようとしているのですが、
name属性が"data[TestModel][field]"のためか、
document.form.data[ModelTest][field].value = 0とするとエラーになってしまいます。
(TestModelは宣言されていません。というエラー）

ラジオボタンのグループは複数あります。
ラジオボタンにアクセスするにはどうしたらよいでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2011/07/28 22:13

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">

</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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
出来ました!!

var deflt = "data[TestModel][field]";
この方法はいろいろ検索していた時に見つけていたのですが、
""で囲むとしかかかれていなくて、指定の仕方を誤っていたようです。

t.form.deflt.checked = true;
こうしていました。

var t = evt.target || evt.srcElement;
これは、formにname属性がない時に使えそうですね。
javascriptも初心者なので、知りませんでした…

通報する

お礼日時：2011/07/29 13:14

No.4

回答者： babu_baboo
回答日時：2011/07/29 04:22

checked="checked" のようにしょうりゃくもせずにあることだし、ここは

そのふぉーむを、form.reset () するだけで・・・

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

この方法でやってみたのですが、出来なかったのです…
おそらく、このフォームの状態を保持したまま、
画面を更新する処理をphpでしているから？？だと思うのですが…

ラジオボタン以外にもテキストボックスやセレクトボックスやチェックボックスがありますが、チェックやテキストがクリアされませんでした。

これで出来れば、ソースもすっきりすると思っていたので残念です。

通報する

お礼日時：2011/07/29 13:18

No.2

回答者： gokigen2525
回答日時：2011/07/28 17:37

うーん、本来 [ ] は配列の個別オブジェクトを参照するものですからねぇ。

NAMEの data[TestModel][field] を data_TestModel_field あたりに変更したほうがよいかと思いますが、
変更が不可なら IDで参照したほうが安全かも
var rdobtn = document.getElementById('TestModelField0');
rdobtn.checked;

- 0
- 件

通報する

No.1

回答者： gokigen2525
回答日時：2011/07/28 12:42

＞document.form.data[ModelTest][field].value = 0とするとエラーになってしまいます。

は
＜document.form.data[TestModel][field].value = 0とするとエラーになってしまいます。
ですよね？

それはそれとして
document.form.data[TestModel][field][0].checked
で動作しませんか？

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
ご指摘ありがとうございます。
こちらでの入力ミスですので大丈夫です。

document.form.data[TestModel][field][0].checked
で試したところ、IEからのエラーが表示されました。

document.form.data.TestModel' は Null またはオブジェクトではありません。

dataとTestModelが'.'で区切られているのが気になります。

通報する

お礼日時：2011/07/28 16:07

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！