jQuery チェックボックスの値を取得/設定するサンプル

jQueryのチェックボックスの値を取得/設定するサンプルです。

コード

以下4つのサンプルがあります。

No 説明
値を取得
14行目は、inputセレクタと:checkboxセレクタとnameの名称で対象を特定(41-43行目)しvalメソッドでcheckedがついているvalue値を取得しています。
複数の値を取得する場合があるのでeachでループ処理を行い配列に格納しています。
値を設定
23行目は、inputセレクタと:checkboxセレクタとnameの名称で対象を特定(41-43行目)し、valメソッドで指定したvalue値と一致するものにチェックを入れています。コードにある["yellow","blue"]は配列を表します。
値を設定 - 全ての項目にチェックを入れる(全選択)
28行目は、inputセレクタと:checkboxセレクタとnameの名称で対象を特定(41-43行目)しpropメソッドで全てにチェックを入れています。
値を設定 - 全ての項目のチェックを外す
33行目は、inputセレクタと:checkboxセレクタとnameの名称で対象を特定(41-43行目)しpropメソッドでチェックを外しています。
- 以下は、サンプルコードで使用しているセレクタと擬似クラスです。
 inputセレクタ・・・要素セレクタ
 :checkboxセレクタ・・・jQueryの拡張セレクタ
 [name="color"]・・・属性セレクタ
 :checked・・・擬似クラス
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	var colors = [];
	// ボタン1が押されたときの動作
	$("#b1").click(function() {
		colors.length = 0;
		// 1.値を取得
		$('input:checkbox[name="color"]:checked').each(function() {
			// 配列に格納
			colors.push($(this).val());
			$('#sp1').text(colors);
		});
	});
	// ボタン2が押されたときの動作
	$("#b2").click(function() {
		// 2.値を設定
		$('input:checkbox[name="color"]').val(["yellow","blue"]);
	});
	// ボタン3が押されたときの動作
	$("#b3").click(function() {
		// 3.全ての項目にチェックを入れる(全選択)
		$('input:checkbox[name="color"]').prop('checked',true);
	});
	// ボタン4が押されたときの動作
	$("#b4").click(function() {
		// 4.全ての項目のチェックを外す
		$('input:checkbox[name="color"]').prop('checked',false);
		$('#sp1').text("");
	});
});
</script>
</head>
<body >
<p>選択した色 <span id="sp1"></span></p>
<input type="checkbox" name="color" value="red" checked>:赤
<input type="checkbox" name="color" value="yellow">:黄
<input type="checkbox" name="color" value="blue">:青<br/>
<input type="button" id="b1" value="ボタン1" /><br/>
<input type="button" id="b2" value="ボタン2" /><br/>
<input type="button" id="b3" value="ボタン3" /><br/>
<input type="button" id="b4" value="ボタン4" />
</body>
</html>

サンプル

上記コードのサンプルです。 
ボタン1を押すと、チェックボックスの現在選択されているvalue値を取得して表示します。
ボタン2を押すと、チェックボックスの黄と青にチェックを入れます。
ボタン3を押すと、チェックボックスのチェックをすべて入れます。
ボタン4を押すと、チェックボックスのチェックを外します。

選択した色

:赤 :黄 :青



:checkboxセレクタ

val()メソッド

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

val(value)メソッド

  • jQueryのメソッドです。
  • val(value)は、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 テキストエリアの値を取得/設定するサンプル
jQuery ループ処理を行うサンプル(each)




△上に戻る