Latest topics > prototype.jsでラジオボタンの選択された値を取得する
宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。
以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！
prototype.jsでラジオボタンの選択された値を取得する - Mar 16, 2006
prototype.js 1.4.0を使っていることを前提として。
ラジオボタンというのは、こういう奴のことだ。
- <label><input type="radio" name="dummy" value="1" />項目1</label>
- <label><input type="radio" name="dummy" value="2" />項目2</label>
- <label><input type="radio" name="dummy" value="3" />項目3</label>
チェックボックス風のものがいくつか並んでて、一つだけを選べるというもの。ここで1～3のどの項目がチェックされているのかをJavaScriptで知るためには、通常、以下のようにする必要がある。
var nodes = Form.getInputs($('form'), 'radio', 'dummy');
var selectedItem = $A(nodes).find(function(aNode) { return aNode.checked; });
alert(selectedItem.value);
ところでXULでは、同様のものを以下のように書くことができる。
<radiogroup id="dummy">
<radio value="1" label="項目1" />
<radio value="2" label="項目2" />
<radio value="3" label="項目3" />
</radiogroup>そして、XULではradiogroup要素のノードから直接「選択された項目の値」を取得することができる。
alert($('dummy').value);
XUL生活（？）が長かった僕は、これにすっかり染まってしまって、prototype.jsにラジオボタン用の機能がないことを知って非常にガッカリしたと同時に、どうやってラジオボタンの選択された値を一発で取得すればよいのか分からず大いに困惑した（「Enumerableクラスのfindメソッドまたはdetectメソッドを使う」という前述の方法などで、やろうと思えばできるということには後から気がついたけど、慌てていた僕はそこまで思い至らなかった）。
そういうわけでごろうさんに泣きついてみたところ、以下のような方法を教えてもらえた。
alert(Form.serialize($(form)).toQueryParams()['dummy']);
フォーム全体の値を一旦クエリの形式に変換して、その上でラジオボタンの部分の値を得るという方法だ。なるほど、こんな方法もあるのか……ということでさっそくこれを使わせてもらうことにした。
でも、この方法はちょっと遠回りなのが残念といえば残念。実行時間も少々余計にかかりそうな気がする。ラジオボタンは排他的選択なんだから、XULの場合のような一発で値を得る方法がprototype.jsにもあっても良さそうなものだと思うんだけどなあ。トホホホホ。
このカテゴリ以下の他のエントリ
Comments/Trackbacks
prototype.js いろいろ
■ラジオボタンの値を取得する。 prototype自身は単発でラジオボタンの値を...
prototype.jsでラジオボタンの値を取得
prototype.jsで$Fを使ってform中の値を取得したりできるのだけれど、$Fはテキストボックスやドロップダウンリストが対象でラジオボタンやチェックボックスの値までは取得できない。で、ど...
TrackBack ping me at
の末尾に2020年11月30日時点の日本の首相のファミリーネーム（ローマ字で回答）を繋げて下さい。例えば「noda」なら、「2006-03-16_radio.trackbacknoda」です。これは機械的なトラックバックスパムを防止するための措置です。
Post a comment
writeback message: Ready to post a comment.