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

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

目次

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

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/3.4.1/jquery.min.js"></script>
<script>

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

チェックされたらvalue値を取得する

チェックされたらvalue値を取得して表示します。

選択した色

:赤 :青

 

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

<p>選択した色 <span id="span7"></span></p>
<input type="checkbox" id="c1" value="red" >:赤
<input type="checkbox" id="c2" value="blue" >:青

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#c1").click(function() {
		$('#span7').text($(this).val());
		$("#c2").prop('checked',false);
	});
	$("#c2").click(function() {
		$('#span7').text($(this).val());
		$("#c1").prop('checked',false);
	});

</script>

8,12行目は、IDセレクタで2,3行目のチェックボックスを指定しています。
9,13行目は、取得したvalue値を画面に表示します。
10,14行目は、チェックしていない方のチェックを外しています。

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

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

:赤 :黄 :青 

 

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

<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/3.4.1/jquery.min.js"></script>
<script>

	$("#button4").click(function() {
		$('input:checkbox[name="color4"]').val(["yellow","blue"]);
	});

</script>

1~3行目は、チェックボックスです。
10行目は、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/3.4.1/jquery.min.js"></script>
<script>

	$("#button5").click(function() {
		$('input:checkbox[name="color5"]').prop('checked',true);
	});

</script>

1~3行目は、チェックボックスです。
10行目は、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/3.4.1/jquery.min.js"></script>
<script>

	$("#b6").click(function() {
		$('input:checkbox[name="color6"]').prop('checked',false);
	});

</script>

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

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

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

選択した色

:赤 

 

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button11").click(function() {
		if( $("#c11").prop('checked')){
			$('#span11').text("trueです");
		}else{
			$('#span11').text("falseです");
		}
	});

</script>

2行目は、チェックボックスです。
9行目は、IDセレクタとpropメソッドでチェックの状態を真偽値で判定します。チェックされていればtrue、チェックされていない場合はfalseを返します。

チェックを入れる

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

:赤  

 

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


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button2").click(function() {
		$("#color2").prop('checked',true);
		//$("#color2").val(['red']);
	});

</script>

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

以下は、上記サンプルで使用するセレクタとメソッドです。

: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)

△上に戻る