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

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

目次

値を取得する

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	var str1;
	$("#b1").click(function() {
		// 値を取得
		str1 = $('input:radio[name="c1"]:checked').val();
		$('#sp1').text(str1);
	});
});
</script>
<p>選択した色 <span id="sp1"></span></p>
<input type="radio" name="c1" value="red" checked> 赤
<input type="radio" name="c1" value="yellow" > 黄
<input type="radio" name="c1" value="blue" > 青<br/>
<input type="button" id="b1" value="ボタン1" />

サンプル

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

選択した色


セレクタ

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

 

値を設定する

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

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

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

	});
});
</script>

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

サンプル

上記コードのサンプルです。
ボタンを押すと青にチェックが入ります。


セレクタ

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

 

チェックを外す

チェックを外すサンプルです。
7行目は、inputセレクタと:radioセレクタとnameの名称で対象を特定(13-15行目)しpropメソッドでチェックを外しています。

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

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

	});
});
</script>

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

サンプル

上記コードのサンプルです。
ボタンを押すとチェックが外れます。


セレクタ

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

 

: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 ラジオボタンの値を取得/設定するサンプル

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る