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

このページのタグ:[JavaScript] [jQuery]
jQueryでチェックボックスのチェック状態を取得するコードを紹介します。

概要

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

書式

$("セレクタ").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>


  $(document).ready(function () {
    ...
  }
上記コードにより、ページ表示後にJavaScriptが実行されます。


$("#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/>");
  }
})
上記コードが"Button1"のクリックイベントのコードです。"CheckBox1"は

$("#Checkbox1").prop("checked") 
の値からチェック状態を判定し、"CheckBox2"は

$("#Checkbox2:checked").val() 
の値でチェック状態を判定しています。
メッセージは"output"IDのタグに表示します。

実行結果

上記のHTMLファイルを表示します。下図の画面が表示されます。


チェックボックスにチェックをつけ[Exec]ボタンをクリックします。[Exec]ボタンの下部にクリック状態を示すメッセージが表示されます。


チェックボックスのチェックを変更して[Exec]ボタンをクリックするとメッセージの内容も変わります。



プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)