小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


jQueryでチェックボックスのチェック状態を調べる方法


photo credit: Alan Cleaver via photopin cc

2013.06.14追記

コメント欄の指摘を受けて、記事を一部修正しました。

はじめに

jQueryでチェックボックスのチェック状態を調べる方法をまとめてみました。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)
西畑一馬
アスキー・メディアワークス
売り上げランキング: 6,298

jQueryのバージョン
  • jQuery v1.10.1
jQueryでチェックボックスのチェック状態を調べる方法1

jQueryでチェックボックスのチェック状態を調べるには、以下のようなコードを書きます。#check1はチェックボックス要素のIDを指定します。$("#check1").attr("checked")という方法ではチェック状態がとれないようです。

   if($("#check1:checked").val()) {
     alert("チェックされています。");
   }
   else {
     alert("チェックされていません。");
   }
jQueryでチェックボックスのチェック状態を調べる方法2(推奨)
   if($("#check1").prop('checked')) {
     alert("チェックされています。");
   }
   else {
     alert("チェックされていません。");
   }
jQueryでチェックボックスのチェック状態を調べる方法3
   if($('#check1').is(':checked')) {
     alert("チェックされています。");
   }
   else {
     alert("チェックされていません。");
   }
サンプルプログラム
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>jQueryでチェックボックスのチェック状態を調べる</title>
 <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
 <script>
 function func1() {
   //if($("#check1:checked").val()) {
   //if($('#check1').is(':checked')) {
   if($("#check1").prop('checked')) {
     alert("チェックされています。");
   }
   else {
     alert("チェックされていません。");
   }
 }
 </script>
 </head>
 <body>
 <h2>jQueryでチェックボックスのチェック状態を調べる</h2>
 <input type="checkbox" id="check1" name="check1" value="1"><label for="check1">チェックボックス1</label>
 <input type="button" id="button1" name="button1" onclick="func1();" value="クリック">
 </body>
</html>