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

photo credit: Alan Cleaver via photopin cc

2013.06.14追記

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

はじめに

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

西畑一馬
アスキー・メディアワークス
売り上げランキング: 6,298

jQueryのバージョン

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

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

   if($("#check1:checked").val()) {
     alert("チェックされています。");
   }
   else {
     alert("チェックされていません。");
   }

jQueryでチェックボックスのチェック状態を調べる方法２（推奨）

   if($("#check1").prop('checked')) {
     alert("チェックされています。");
   }
   else {
     alert("チェックされていません。");
   }

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

   if($('#check1').is(':checked')) {
     alert("チェックされています。");
   }
   else {
     alert("チェックされていません。");
   }

サンプルプログラム


 <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").prop('checked')) {
     alert("チェックされています。");
   }
   else {
     alert("チェックされていません。");
   }
 }
 </script>
 </head>
 <body>
 <h2>jQueryでチェックボックスのチェック状態を調べる</h2>
 <input type="checkbox" id="check1" name="check1" value="1"><label for="check1">チェックボックス１</label>
 <input type="button" id="button1" name="button1" onclick="func1();" value="クリック">
 </body>
</html>

jQueryでチェックボックスのチェック状態を調べる方法 - 大人になったら肺呼吸