iPentec.com / Articles / JavaScript / jQuery

jQueryでチェックボックスのチェック状態を取得する

jQueryでチェックボックスのチェック状態を取得するコードを紹介します。

概要

チェックボックスのチェック状態を取得するには、セレクタでチェックボックスを選択し、.prop("checked")メソッドを呼び出します。またはセレクタに":checked"を付与してval()メソッドで取得することもできます。

メモ

jQueryを利用せずにチェックボックスのチェック状態を取得するコードについてはこちらの記事を参照してください。

書式

$("セレクタ").prop("checked")

jquery("セレクタ").prop("checked")

または

$("セレクタ:checked").val()

jquery("セレクタ:checked").val()

とします。

プログラム例

以下のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-2.0.3.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#Button1").click(function () {
          if ($("#Checkbox1").prop("checked") == true) {
            $("#output").html("チェック項目1がチェックされています。<br/>");
          } else {
            $("#output").html("チェック項目1がチェックされていません。<br/>");
          }

          if ($("#Checkbox2:checked").val() == "on") {
            $("#output").html($("#output").html() + "チェック項目2がチェックされています。<br/>");
          } else {
            $("#output").html($("#output").html() + "チェック項目2がチェックされていません。<br/>");
          }
        })
      })
    </script>

</head>
<body>
  <form name="form1" action="">
    <input id="Checkbox1" type="checkbox" /><label for="Checkbox1">チェック項目1</label><br />
    <input id="Checkbox2" type="checkbox" /><label for="Checkbox2">チェック項目2</label><br />
    <input id="Button1" type="button" value="Exec" />
  </form>

  <div id="output"></div>
</body>
</html>

解説

下記がjQueryのJavaScriptコード部分です。

<script type="text/javascript">
  $(document).ready(function () {
    $("#Button1").click(function () {
      if ($("#Checkbox1").prop("checked") == true) {
        $("#output").html("チェック項目1がチェックされています。<br/>");
      } else {
        $("#output").html("チェック項目1がチェックされていません。<br/>");
      }

      if ($("#Checkbox2:checked").val() == "on") {
        $("#output").html($("#output").html() + "チェック項目2がチェックされています。<br/>");
      } else {
        $("#output").html($("#output").html() + "チェック項目2がチェックされていません。<br/>");
      }
    })
  })
</script>

下記コードにより、ページ表示後にJavaScriptが実行されます。

  $(document).ready(function () {
    ...
  }

以下が"Button1"のクリックイベントのコードです。

$("#Button1").click(function () {
  if ($("#Checkbox1").prop("checked") == true) {
    $("#output").html("チェック項目1がチェックされています。<br/>");
  } else {
    $("#output").html("チェック項目1がチェックされていません。<br/>");
  }

  if ($("#Checkbox2:checked").val() == "on") {
    $("#output").html($("#output").html() + "チェック項目2がチェックされています。<br/>");
  } else {
    $("#output").html($("#output").html() + "チェック項目2がチェックされていません。<br/>");
  }
})

"CheckBox1"のチェック状態を下記コードで取得します。