jQuery - チェックボックス(checkbox)のチェックの設定と取得
公開日：2018-12-21
更新日：2019-05-14
更新日：2019-05-14
1. 概要
チェックボックス(checkbox)のチェックの設定と取得を行います。
//チェックの設定
$(セレクタ).prop("checked", true); //チェックする
$(セレクタ).prop("checked", false); //チェックをはずす
//チェックの取得
$(セレクタ).prop("checked")
2. サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<input type="checkbox" id="chk1" />最初からチェックなし <br /><br />
<input type="checkbox" id="chk2" />動的にチェックしました。 <br /><br />
<input type="checkbox" id="chk3" checked="checked" />最初からチェックしてあります。<br /><br />
<input type="checkbox" id="chk4" checked="checked" />動的にチェックをはずしました。<br /><br />
<script>
$(function(){
//チェックを付ける
$("#chk2").prop("checked", true);
//チェックをはずす
$("#chk4").prop("checked", false);
//チェック状態の取得
console.log( $("#chk1").prop("checked") );
console.log( $("#chk2").prop("checked") );
console.log( $("#chk3").prop("checked") );
console.log( $("#chk4").prop("checked") );
});
</script>
</body></html>
実行結果：画面
false
true
true
false
