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

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

目次

checkboxが1つ チェックされたか真偽値で確認する
  チェックを入れる
checkboxが複数 チェックされた複数個のvalue値を配列に取得する
  複数個にチェックを入れる
  全てにチェックを入れる(全選択)
  全てのチェックを外す(全解除)

チェックされたか真偽値で確認する

ボタンを押した時、チェックされていた場合、trueと表示します。

選択した色

:赤 

コード

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

<p>選択した色 <span id="span1"></span></p>
<input type="checkbox" id="c1" value="red" checked>:赤
<input type="button" id="button1" value="ボタン" />

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

		if( $("#c1").prop('checked')){
			$('#span1').text("trueです");
		}else{
			$('#span1').text("falseです");
		}
	});
});
</script>

2行目は、チェックボックスです。
10行目は、IDセレクタとpropメソッドでチェックの状態を真偽値で取得チェックされていればtrueを返します。

 

チェックを入れる

ボタンを押すと1つの項目にチェックを入れます。

:赤  

コード

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


<input type="checkbox" id="color2" value="red" >:赤
<input type="button" id="button2" value="ボタン" />

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

		$("#color2").prop('checked',true);
		//$("#color2").val(['red']);
	});
});
</script>

2行目は、チェックボックスです。
10行目は、propメソッドでチェックを入れます。
11行目も同じくチェックを入れます。valメソッドでvalue値を指定しています。

 

チェックされた複数個のvalue値を配列に取得する

チェックされた複数個のvalue値を配列に取得します。

選択した色

:赤 :黄 :青 

コード

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

<p>選択した色 <span id="span3"></span></p>
<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="ボタン" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	const colors = [];
	$("#button3").click(function() {
		colors.length = 0;

		$('input:checkbox[name="color3"]:checked').each(function() {
			colors.push($(this).val());
			$('#span3').text(colors);
		});
	});
});
</script>

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

 

複数個にチェックを入れる

ボタンを押すと黄と青にチェックが入ります。

:赤 :黄 :青 

コード

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

<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="button4" value="ボタン" />

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

		$('input:checkbox[name="color4"]').val(["yellow","blue"]);
	});
});
</script>

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

 

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

ボタンを押すと全てにチェックが入ります。

:赤 :黄 :青 

コード

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

<input type="checkbox" name="color5" value="red" checked>:赤
<input type="checkbox" name="color5" value="yellow">:黄
<input type="checkbox" name="color5" value="blue">:青
<input type="button" id="button5" value="ボタン" />

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

		$('input:checkbox[name="color5"]').prop('checked',true);
	});
});
</script>

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

 

全てのチェックを外す(全解除)

ボタンを押すと全てのチェックが外れます。

:赤 :黄 :青 

コード

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

<input type="checkbox" name="color6" value="red" checked>:赤
<input type="checkbox" name="color6" value="yellow">:黄
<input type="checkbox" name="color6" value="blue">:青
<input type="button" id="b6" value="ボタン" />

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

		$('input:checkbox[name="color6"]').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

関連の記事

CSS 属性セレクタのサンプル(要素名[属性名="値"])
jQuery hiddenの値を取得/設定するサンプル
jQuery ラジオボタンの値を取得/設定するサンプル
jQuery セレクトボックスの値を取得/設定するサンプル
jQuery テキストボックスの値を取得/設定するサンプル
jQuery テキストエリアの値を取得/設定するサンプル
Query 繰り返し処理を行うサンプル(each)

△上に戻る