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

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

f:id:replication:20130614003753j:image

photo credit: Alan Cleaver via photopin cc

2013.06.14追記

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

はじめに

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

西畑一馬
アスキー・メディアワークス
売り上げランキング: 6,298
jQueryのバージョン
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("チェックされていません。");
   }
サンプルプログラム

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

関連エントリ