jQueryでラジオボタンの選択状態を取得する:val()

今回は、jQueryでラジオボタンの状態を取得する方法を説明します。

ラジオボタンのON/OFFで表示を切り替えたり、フォームのどのラジオボタンが選択されているかをAjaxなどで送信するなど様々な場面で使われます。

ラジオボタンのチェック状態を取得する.val()

val()は、指定した要素のvalue属性を返すメソッドです。また、val("値")とすることでvalue属性を設定することもできます。

このval()メソッドを使ってラジオボタンの選択状態を取得します。

以下のような、4つのラジオボタンがあるとします。

HTML

<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

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

ポイントは、:checkedをセレクタで指定して選択状態の要素のみ取得している点です。このコードでは、name="radio01"のラジオボタンの中で、現在選択されているラジオボタンのvalueが取得できます。

選択肢3が選択されている場合、valueの3を取得できます。

ただし、val()でvalue属性を取得する時、未選択状態で値取得すると「undefined」となるので注意が必要です。


イベント

2017/10/06(金)
UX School(全10回)