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

nas

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

目次

値を取得する

ボタンを押すと選択した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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		// 値を取得
		const str1 = $('input:radio[name="c1"]:checked').val();
		$('#span1').text(str1);
	});
});
</script>

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

セレクタ

以下は、上記コードで使用しているセレクタと擬似クラスです。
　inputセレクタ・・・要素セレクタ
　:radioセレクタ・・・jQueryの拡張セレクタ
　[name="c1"]・・・属性セレクタ
　:checked・・・擬似クラス
jQuery セレクタとセレクタの一覧

 

値を設定する

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

赤 黄 青　

コード

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

<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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button2").click(function() {
		// 値を設定
		$('input:radio[name="c2"]').val(["blue"]);
	});
});
</script>

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

セレクタ

以下は、上記コードで使用しているセレクタです。
　inputセレクタ・・・要素セレクタ
　:radioセレクタ・・・jQueryの拡張セレクタ
　[name="c2"]・・・属性セレクタ
jQuery セレクタとセレクタの一覧

 

チェックを外す

ボタンを押すとラジオボタンのチェックが外れるサンプルです。

赤 黄 青　

コード

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

<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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button3").click(function() {
		// チェックを外す
		$('input:radio[name="c3"]').prop('checked',false);

	});
});
</script>

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

セレクタ

以下は、上記コードで使用しているセレクタと擬似クラスです。
　inputセレクタ・・・要素セレクタ
　:radioセレクタ・・・jQueryの拡張セレクタ
　[name="c3"]・・・属性セレクタ
　:checked・・・擬似クラス
jQuery セレクタとセレクタの一覧

 

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

ラジオボタンをチェックしたら値を取得するサンプルです。

選択した色

赤 黄 青

コード

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$('input:radio[name="c4"]').change(function() {
		// 値を取得
		const str1 = $('input:radio[name="c4"]:checked').val();
		$('#span4').text(str1);
	});
});
</script>

2-4行目は、ラジオボタンです。
10行目のchangeは、対象に変化のイベントがあったとき、12,13行目を実行します。
12行目は、valメソッドで値を取得しています。

:radioセレクタ

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 属性セレクタのサンプル(要素名[属性名="値"])
jQuery hiddenの値を取得/設定するサンプル
jQuery チェックボックスの値を取得/設定するサンプル
jQuery セレクトボックスの値を取得/設定するサンプル
jQuery テキストボックスの値を取得/設定するサンプル
jQuery テキストエリアの値を取得/設定するサンプル
JavaScript ラジオボタンの値を取得/設定するサンプル

△上に戻る