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

photo credit: Alan Cleaver via photopin cc

2013.06.14追記

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

はじめに

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

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

posted with amazlet at 14.02.01

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

Amazon.co.jpで詳細を見る

jQueryのバージョン

jQuery v1.10.1

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("チェックされていません。");
   }

サンプルプログラム

<!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">チェックボックス１</label>
 <input type="button" id="button1" name="button1" onclick="func1();" value="クリック">
 </body>
</html>