Mar 16, 2006
prototype.jsでラジオボタンの選択された値を取得する
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にもあっても良さそうなものだと思うんだけどなあ。トホホホホ。
wikieditish message: Ready to edit this entry.