jQueryでチェックボックスのチェック状態を取得するコードを紹介します。
概要
チェックボックスのチェック状態を取得するには、セレクタでチェックボックスを選択し、.prop("checked")メソッドを呼び出します。またはセレクタに":checked"を付与してval()メソッドで取得することもできます。
書式
$("セレクタ").prop("checked")
jquery("セレクタ").prop("checked")
または
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"のチェック状態を下記コードで取得します。
$("#Checkbox1").prop("checked")
同様に、"CheckBox2"のチェック状態を下記コードで取得します。
$("#Checkbox2:checked").val()
チェック状態を判定しメッセージは"output"IDのタグに表示します。
実行結果
上記のHTMLファイルを表示します。下図の画面が表示されます。
チェックボックスにチェックをつけ[Exec]ボタンをクリックします。[Exec]ボタンの下部にクリック状態を示すメッセージが表示されます。
チェックボックスのチェックを変更して[Exec]ボタンをクリックするとメッセージの内容も変わります。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2014-01-23