jQuery ラジオボタンの値を取得/設定するサンプル

01. ラジオボタン

・値を取得する

・チェックをつける

・チェックを外す

・ラジオボタンをチェックしたら値を取得する

値を取得する

ボタンを押すと選択したvalue値を取得するサンプルです。

選択した色

赤黄青　

上記サンプルのコードです。

<p>選択した色 <span id="span1"></span></p>
<input type="radio" name="c1" value="red" checked> 赤
<input type="radio" name="c1" value="yellow" > 黄
<input type="radio" name="c1" value="blue" > 青
<input type="button" id="button1" value="ボタン1" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button1").click(function() {
		const str1 = $('input:radio[name="c1"]:checked').val();
		$('#span1').text(str1);
	});

</script>

2～4行目は、ラジオボタンです。
11行目は、inputセレクタと:radioセレクタとnameの名称と疑似クラスの:checkedでチェックされた行を特定(2～4行目)しvalメソッドで値を取得しています。

チェックをつける

チェックをつけるサンプルです。
ボタンを押すとラジオボタンの青にチェックが入ります。

赤黄青　

上記サンプルのコードです。

<input type="radio" name="c2" value="red" checked> 赤
<input type="radio" name="c2" value="yellow" > 黄
<input type="radio" name="c2" value="blue" > 青
<input type="button" id="button2" value="ボタン2" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button2").click(function() {
		$('input:radio[name="c2"]').val(["blue"]);
	});

</script>

1～3行目は、ラジオボタンです。
10行目は、inputセレクタと:radioセレクタとnameの名称で対象を特定(1～3行目)しvalメソッドで指定したvalue値と一致するものにチェックを入れています。コードにある["blue"]は配列を表します。

チェックを外す

ボタンを押すとラジオボタンのチェックが外れます。

赤黄青　

上記サンプルのコードです。

<input type="radio" name="c3" value="red" checked> 赤
<input type="radio" name="c3" value="yellow" > 黄
<input type="radio" name="c3" value="blue" > 青
<input type="button" id="button3" value="ボタン3" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button3").click(function() {
		$('input:radio[name="c3"]').prop('checked',false);
	});

</script>

1～3行目は、ラジオボタンです。
10行目は、inputセレクタと:radioセレクタとnameの名称で対象を特定(1～3行目)しpropメソッドでチェックを外しています。

ラジオボタンをチェックしたら値を取得する

ラジオボタンをチェックしたら値を取得します。

選択した色

赤黄青

上記サンプルのコードです。

<p>選択した色 <span id="span4"></span></p>
<input type="radio" name="c4" id="r1" value="red" checked> 赤
<input type="radio" name="c4" id="r2"  value="yellow" > 黄
<input type="radio" name="c4" id="r3"  value="blue" > 青

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$('input:radio[name="c4"]').change(function() {
		const str1 = $('input:radio[name="c4"]:checked').val();
		$('#span4').text(str1);
	});
	// $("#r1").click(function() {
    //     const str1 = $('input:radio[name="c4"]:checked').val();
	// 	$('#span4').text(str1);
	// });
    // $("#r2").click(function() {
    //     const str1 = $('input:radio[name="c4"]:checked').val();
	// 	$('#span4').text(str1);
	// });
    // $("#r3").click(function() {
    //     const str1 = $('input:radio[name="c4"]:checked').val();
	// 	$('#span4').text(str1);
	// });
</script>

2～4行目は、ラジオボタンです。
9行目のchangeは、対象に変化のイベントがあったとき、12,13行目を実行します。
11行目は、valメソッドで値を取得しています。
13～24行目のようにclickでもチェックされた箇所は判別できます。

以下は、上記サンプルで使用するセレクタとメソッドです。

:radioセレクタ

jQueryの拡張セレクタです。
radio属性を選択します。
以下はjQueryサイトの:radioセレクタのページです。
http://api.jquery.com/radio-selector/

val()メソッド

jQueryのメソッドです。
val()は、valueの値を返します。
以下はjQueryサイトの.val()メソッドのリンクです。
http://api.jquery.com/val/

val(値)メソッド

jQueryのメソッドです。
val(値)は、valueに値をセットします。
以下はjQueryサイトの.val(value)メソッドのリンクです。
http://api.jquery.com/val/#val2

propメソッド

jQueryのメソッドです。
プロパティを操作するメソッドです。
以下はjQueryサイトの.prop()メソッドのページです。
http://api.jquery.com/prop/

:checked

CSSの疑似クラスです。
チェックされている状態を表します。
以下はMDNの:checkedのページです。
https://developer.mozilla.org/ja/docs/Web/CSS/:checked