【jQuery】ラジオボタンの選択されている項目の取得

Tweet

Category JavaScript 2011/12/21

問題

jQuery使ってます。

ラジオボタンの選択されている項目の文字の方を取得したいです。

答え

ラジオボタンの、選択されている項目をあらわすセレクタは、name属性を使うとこう書ける。

input[name='kome']:checked

値を取得するには、

$("input[name='kome']:checked").val();

表示しているテキストの方を取得するには、このままでは難しいが、label要素で囲んでしまうとやりやすい。

HTMLをこのようにして、

<label><input type="radio" name="kome" value="1">コシヒカリ</label>
<label><input type="radio" name="kome" value="2">ひとめぼれ</label>
<label><input type="radio" name="kome" value="3">あきたこまち</label>

該当のラジオボタンの親要素の中のテキストをとってくるようにすると簡単。

$("input[name='kome']:checked").parent().text();

デモ

ラジオボタンの選択されている項目の値の取得