Home > Latest topics

Latest topics > prototype.jsでラジオボタンの選択された値を取得する

宣伝1。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能! シス管系女子って何!? - 「シス管系女子」特設サイト

宣伝2。Firefox Hacks Rebooted発売中。本書の1/3を使って、再起動不要なアドオンの作り方のテクニックや非同期処理の効率のいい書き方などを解説しています。既刊のFirefox 3 Hacks拡張機能開発チュートリアルと併せてどうぞ。

Firefox Hacks Rebooted ―Mozillaテクノロジ徹底活用テクニック
浅井 智也 池田 譲治 小山田 昌史 五味渕 大賀 下田 洋志 寺田 真 松澤 太郎
オライリージャパン

prototype.jsでラジオボタンの選択された値を取得する - Mar 16, 2006

prototype.js 1.4.0を使っていることを前提として。

ラジオボタンというのは、こういう奴のことだ。

チェックボックス風のものがいくつか並んでて、一つだけを選べるというもの。ここで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にもあっても良さそうなものだと思うんだけどなあ。トホホホホ。

分類:Web技術 > JavaScript > prototype.js, , , , 時刻:19:38 | Comments/Trackbacks (2) | Edit

このカテゴリ以下の他のエントリ

  1. prototype.jsのオブジェクト汚染
  2. 無駄にprototype.js

Comments/Trackbacks

prototype.js いろいろ

■ラジオボタンの値を取得する。 prototype自身は単発でラジオボタンの値を...

Trackback from what a bringdown at 2006/08/22 (Tue) 22:14:25

prototype.jsでラジオボタンの値を取得

prototype.jsで$Fを使ってform中の値を取得したりできるのだけれど、$Fはテキストボックスやドロップダウンリストが対象でラジオボタンやチェックボックスの値までは取得できない。で、ど...

Trackback from せつないぶろぐ at 2006/10/20 (Fri) 16:27:26

TrackBack ping me at


の末尾に2014年1月19日時点の日本の首相のファミリーネーム(ローマ字で回答)を繋げて下さい。例えば「noda」なら、「2006-03-16_radio.trackbacknoda」です。これは機械的なトラックバックスパムを防止するための措置です。

Post a comment

writeback message: Ready to post a comment.

2014年1月19日時点の日本の首相のファミリーネーム(ひらがなで回答)

Powered by blosxom 2.0 + starter kit
Home

カテゴリ一覧

過去の記事

1999.2~2005.8

最近のつぶやき

オススメ

Mozilla Firefox ブラウザ無料ダウンロード