目次
01. チェックボックス
・チェックを入れる(全選択)、prop('checked',true)
・チェックを外す(全解除)、prop('checked',false)
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;
$(':checkbox[name="color3"]:checked').each(function () {
colors.push($(this).val());
$("#span3").text(colors);
});
});
</script>
2～4行目は、チェックボックスです。
:checkboxは、jQueryの拡張セレクタです。
:checkedは、チェックされている状態を表します。CSSの疑似クラスです。
eachでループ処理を行い取得した値を配列にセットしています。
チェックされたらvalue値を取得する
チェックされたらvalue値を取得して表示します。
選択した色
：赤 ：青
上記サンプルのコードです。
<p>選択した色 <span id="span7"></span></p>
<div class="d1">
<input type="checkbox" id="c1" value="red" />：赤
<input type="checkbox" class="c2" value="blue" />：青
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#c1").click(function () {
$("#span7").text($(this).val());
$(".d1 > .c2").prop("checked", false);
});
$(".d1 > .c2").on("click", function () {
$("#span7").text($(this).val());
$("#c1").prop("checked", false);
});
</script>
#c1は、IDセレクタです。clickはクリックされたときに実行されます。
.d1 > .c2は、親子関係を表します。.on("click"はクリックされたときに実行されます。
複数個にチェックを入れる
ボタンを押すと黄と青にチェックが入ります。
：赤 ：黄 ：青
上記サンプルのコードです。
<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>valは、チェックを入れます。コードにある["yellow","blue"]は配列です。
全てにチェックを入れる(全選択)、prop('checked',true)
ボタンを押すと全てにチェックが入ります。
：赤 ：黄 ：青
上記サンプルのコードです。
<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>prop('checked',true)でチェックを入れています。
propは、プロパティを操作するメソッドです。
全てのチェックを外す(全解除)、prop('checked',false)
ボタンを押すと全てのチェックが外れます。
：赤 ：黄 ：青
上記サンプルのコードです。
<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>prop('checked',false)でチェックを外しています。
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です");
}
});
// $("#button11").click(function () {
// if ($("#c11").is(':checked')) {
// $("#span11").text("trueです");
// } else {
// $("#span11").text("falseです");
// }
// });
</script>
2行目は、チェックボックスです。
9行目は、IDセレクタとpropメソッドでチェックの状態を真偽値で判定します。チェックされていればtrue、チェックされていない場合はfalseを返します。
複数のセレクタで指定、OR(.c1,.c3)、AND(.c1.c2)
<input type="checkbox" class="c1 c2" value="red" />：赤
<input type="checkbox" class="c3 c4" value="blue" />：青
<input type="button" id="button2" value="ボタン" />
<input type="button" id="button3" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button2").click(function () {
$(".c1,.c3").prop("checked", true);
});
$("#button3").click(function () {
$(".c1.c2").prop("checked", false);
});
</script>
10行目の(セレクタ1,セレクタ2)は、ORでセレクタ1またはセレクタ2を意味します。
2,3行目にチェックがつきます。区切り文字はカンマ(,)です。
13行目の(セレクタセレクタ)は、ANDでセレクタ1かつセレクタ2を意味します。
2行目のみチェックが外れます。区切り文字はありません。
2番目のチェックボックスにチェックする、eq(1)
<input type="checkbox" class="c1" value="red" />：赤
<input type="checkbox" class="c1" value="blue" />：青
<input type="checkbox" class="c1" value="yellow" />：黄
<input type="checkbox" class="c1" value="green" />：緑
<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 () {
$(".c1").eq(1).prop("checked", true);
// $(".c1:eq(1)").prop("checked", true);
});
</script>
10行目のeq(1)は、2番目を意味します。青のチェックボックがチェックされます。
11行目も10行目と同じ意味です。eqの数値は0から始まります。
チェックボックスで否定を使用、.not
<input type="checkbox" class="c1 c2" value="red" />：赤
<input type="checkbox" class="c1 c3" value="blue" />：青
<input type="checkbox" class="c1 c4" value="yellow" />：黄
<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 () {
$(".c1").not(".c3").prop("checked", true);
// $(".c1:not(.c3)").prop("checked", true);
});
</script>
9行目のnotは、否定を意味します。
9行目は、クラスc1でクラスc3ではないものにチェックを付けます。
→1,3行目のチェックボックスがチェックされます。
10行目も9行目と同じ意味です。
チェックボックスを非活性にする(disabled)
<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>
$("#button3").click(function () {
$(':checkbox[name="color3"]').each(function () {
$(this).prop("disabled", true);
// $(this).prop("disabled", false);
});
});
</script>
12行目は、2～4行目のチェックボックスを入力不可にしています。
13行目は、入力不可の状態を解除します。
関連の記事