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

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

値を取得する
値を設定する
全ての項目にチェックを入れる(全選択)
全ての項目のチェックを外す

値を取得する

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

選択した色

：赤：黄：青　

コード

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

<p>選択した色 <span id="span1"></span></p>
<input type="checkbox" name="color1" value="red" checked>：赤
<input type="checkbox" name="color1" value="yellow">：黄
<input type="checkbox" name="color1" 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() {
	var colors = [];

	$("#button1").click(function() {
		colors.length = 0;
		$('input:checkbox[name="color1"]:checked').each(function() {
			colors.push($(this).val());
			$('#span1').text(colors);
		});
	});
});
</script>

2-4行目は、チェックボックスです。
14行目は、inputセレクタと:checkboxセレクタとnameの名称と疑似クラスの:checkedでチェックされた行を特定(2-4行目)しeachでループ処理を行っています。
15行目は、valメソッドでvalue値を取得して配列に格納しています。

セレクタ

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

値を設定する

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

：赤：黄：青　

コード

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

<input type="checkbox" name="color2" value="red" checked>：赤
<input type="checkbox" name="color2" value="yellow">：黄
<input type="checkbox" name="color2" 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:checkbox[name="color2"]').val(["yellow","blue"]);
	});
});
</script>

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

セレクタ

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

全ての項目にチェックを入れる(全選択)

ボタンを押すと全てにチェックが入るサンプルです。

：赤：黄：青　

コード

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

<input type="checkbox" name="color3" value="red" checked>：赤
<input type="checkbox" name="color3" value="yellow">：黄
<input type="checkbox" name="color3" 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:checkbox[name="color3"]').prop('checked',true);
	});
});
</script>

1-3行目は、チェックボックスです。
11行目は、inputセレクタと:checkboxセレクタとnameの名称で対象を特定(1-3行目)しpropメソッドで全てにチェックを入れています。

セレクタ

全ての項目のチェックを外す

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

：赤：黄：青　

コード

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

<input type="checkbox" name="color4" value="red" checked>：赤
<input type="checkbox" name="color4" value="yellow">：黄
<input type="checkbox" name="color4" value="blue">：青
<input type="button" id="b4" value="ボタン4" />

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

	$("#b4").click(function() {
		$('input:checkbox[name="color4"]').prop('checked',false);
	});
});
</script>

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

セレクタ

:checkboxセレクタ

jQueryの拡張セレクタです。
checkbox属性を選択します。
以下はjQueryサイトの:checkboxセレクタのリンクです。
http://api.jquery.com/checkbox-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