【jQuery】ラジオボタンの値を取り出す方法

jQuery

jQueryを用いて、ラジオボタンの値を取り出す方法についてです。
似た機能であるチェックボックスの値を取り出す方法については以下を参照してください。

jQueryの案件で、チェックボックスの操作で少し躓いたので備忘録です。よくよく考えれば簡単なことなのですが、忘れないように……。【jQuery】チェックボックスの値を取り出す方法 HTMLでのコードが次のような場合 <i[…]

HTMLでのコードが次のような場合

<input type="radio" name="q1" value="1">１
<input type="radio" name="q1" value="2">２
<input type="radio" name="q1" value="3">３

<input type="radio" name="q1" value="1">１

<input type="radio" name="q1" value="2">２

<input type="radio" name="q1" value="3">３

どのラジオボタンがクリックされたかの値を取得します。
取得するのはvalueの値です。

jQueryコードは以下

//ラジオボタンの値を取得
$q1 = $('input:radio[name="q1"]:checked').val();

//ラジオボタンの値が空の場合、処理をストップ
if($q1.length === 0){
	return;
}

//ラジオボタンの値を取得

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

//ラジオボタンの値が空の場合、処理をストップ

if($q1.length === 0){

return;

}

ラジオボタンは一つしか選択しないので、チェックボックスのようにループ処理をする必要もありません。
必須チェックも簡単ですし、分かりやすいですね。

よく出てくる件として、ラジオボタンやチェックボックスのデザインもあるので、そちらもどうぞ。

ラジオボタンやチェックボックスはデフォルトの状態だと少し硬い印象を受けます。デフォルトのラジオボタン、チェックボックスちょっとお堅い感じですよね。デザイン性を高めることは多いので、このラジオボタン、チェックボック[…]