今回は、jQueryでラジオボタンの状態を取得する方法を説明します。
ラジオボタンのON/OFFで表示を切り替えたり、フォームのどのラジオボタンが選択されているかをAjaxなどで送信するなど様々な場面で使われます。
ラジオボタンのチェック状態を取得する.val()
val()は、指定した要素のvalue属性を返すメソッドです。また、val("値")とすることでvalue属性を設定することもできます。
このval()メソッドを使ってラジオボタンの選択状態を取得します。
以下のような、4つのラジオボタンがあるとします。
HTML
|
1 2 3 4 5 6 |
<ul> <li><input type="radio" name="radio01" value="1">選択肢1</li> <li><input type="radio" name="radio01" value="2">選択肢2</li> <li><input type="radio" name="radio01" value="3">選択肢3</li> <li><input type="radio" name="radio01" value="4">選択肢4</li> <ul> |
このラジオボタンのどれが選択されているかを取得するjQueryは以下のようになります。
jQuery
|
1 |
$("input[name='radio01']:checked").val(); |
ポイントは、:checkedをセレクタで指定して選択状態の要素のみ取得している点です。このコードでは、name="radio01"のラジオボタンの中で、現在選択されているラジオボタンのvalueが取得できます。
選択肢3が選択されている場合、valueの3を取得できます。
ただし、val()でvalue属性を取得する時、未選択状態で値取得すると｢undefined｣となるので注意が必要です。
