jQuery - チェックボックス(checkbox)のチェックの設定と取得

公開日：2018-12-21 更新日：2019-05-14
[jQuery]

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


Tag

New Article