bradtosのWEB開発日記

WEB開発エンジニアbradtosによる、JavaScriptやHTML5/CSS3の最新情報などなど・・・



2009-06-23

技術情報:困ったこと jQueryによるラジオボタンの値取得

02:24

なんか最近困ったことばかりのような。

さてjQueryといえば近年のJSライブラリの定番で、

Aptanaにも標準搭載、.jsファイルはおろか

コードアシスト用のドキュメントも内蔵されているという徹底ぶり。


だが・・・個人的にはあまり好きではない。

理由は単純、$()というのはdocument.getElementById()のエイリアス

あるべきだと思うからだ。

というのもprototypeもまだまだ根強い人気があるなか、エイリアス名が

かぶるというのはコーディングする上で非常に厄介な問題であるし、

prototypeのほうが先に流行ったからだ。

もし複数名のJSエンジニアが集まれば喧嘩になること間違いなし。

というのはおいておいて、単にjQuery("CSSセレクタ")というのが気に食わないだけだったり。


なので、自前のユーティリティ群には

//jQueryをj$でアクセスできるように
var j$;
if(typeof jQuery === "function"){
	j$ = jQuery;
}
else{
	delete j$;
}


なんて書いている。



さて本題だが、多くのJSエンジニアがぶつかるであろう

ラジオボタンの値取得について。

通常ラジオボタンといえば、同じnameでvalueが違うものを

複数個配置することが多いと思うが、

document.formsから辿ろうとするとテキストボックスなどと違い

ラジオボタンに指定したname属性は配列になっている。


たとえば以下のラジオボタンがあるとする。


<form name="form1">
<input type="radio" name="rbtest" value="0" />0
<input type="radio" name="rbtest" value="1" checked="checked"/>1
</form>


するとdocument.forms["form1"]["rbtest"].lengthは2となり、

document.forms["form1"]["rbtest"][0]と

document.forms["form1"]["rbtest"][1]をループなりして

checked属性の値をいちいち見なければならない。

なんとも不親切な仕様である。


そこで簡単に取得する方法があったはずだと思い

googleで検索したところ、どうやらjQueryを使えば簡単に取得できるらしい。

使い方は簡単。


jQuery("input:radio[@name=rbtest]:checked").val()


とすることにより取得できるらしいのだ。

しかし、早速問題が発生。

確かに画面を表示したときやinnerHTMLを操作した直後の値が取れることは確認できたが、

マウスで別の値をクリックした後に上記のコードを実行しても

値が変わっていないことがあるようなのだ。


はじめは自分の書いたコードのバグかとも思ったが、

もしかしたらブラウザバグなのだろうか。

現象はIE8で発生しているので、何か情報をお持ちの方は

是非教えていただきたい。

tavitavi 2011/05/25 17:03 もはや、かなり前の記事なので、意味あるか分かりませんけど、
jQuery("input:radio[@name=rbtest]:checked").val()
の、"@"を除いたら期待通りの操作をしてくれると思います。

bradtosbradtos 2011/05/26 00:10 なんとそれでイケるんですか?
ありがとうございます、ちょっとやってみます!