Webページに以下のような3つのラジオボタンがあります。
<label for="theme-grey">
<input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
<input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
<input type="radio" id="theme-green" name="theme" value="green" />Green</label>
jQueryで、この3つのうちどれかがクリックされたときに、選択されたラジオボタンの値を取得したいと思います。jQueryにはid(#)とclass(.)のセレクタがありますが、以下のようにラジオボタンの名前で検索したい場合はどうすればいいでしょうか。
$("<radiobutton name attribute>").click(function(){});
この問題を解決する方法を教えてください。
これらはすべてdocumentに記載されており、これとよく似た例があります。
$("input[type='radio'][name='theme']").click(function() {
var value = $(this).val();
});
また、このスニペットには同一のIDが複数あることにも注意が必要です。これは無効なHTMLです。IDではなく、一連の要素をグループ化するためにクラスを使用してください、IDは一意であるべきです。
どのラジオボタンがチェックされているかを判断するには、次のようにします。
$('input:radio[name=theme]').click(function() {
var val = $('input:radio[name=theme]:checked').val();
});
このイベントは、グループ内のすべてのラジオボタンで捕捉され、選択されたボタンの値がvalに入ります。
*Update: 投稿後、上のPaolo'さんの回答の方が、DOMトラバーサルが1回少なくて済むので良いと判断しました。クロスブラウザに対応した方法で選択された要素を取得する方法を示しているので、この回答はそのままにしておきます。