分かりやすく、使いやすく。

チェックボックスのON/OFFの状態を確認する

スポンサーリンク

jQuery でチェックボックスの ON/OFF の確認をするには prop を使用します。

サンプルコードは以下の通りです。

jQuery(実行可能なサンプルコード)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input type="checkbox" id="sample1" class="my_check_box" />
<label for="sample1">チェックボックス・ステータス取得サンプル1</label>
 
<script>
$(function(){
    $("#sample1").on("click", function (evt) {
        //クリックされたチェックボックスのステータスを取得
        chk_status = $(this).prop('checked');
        
        //取得したステータスをダイアログに表示。ON なら true, OFF なら false 。
        alert(chk_status);
    });
});
</script> 

上記のコードではチェックボックスをクリックすると、チェックボックスの状態(true/false)をダイアログに表示します。実際には以下のように動作します。



ON, OFF の状態は true, false で返されますが、 1, 0 や他の値に変換したい場合は 3 項演算子を使用すると、すっきり記述できます。

以下のサンプルコードでは、ステータスを取得して ON ( true ) なら 1 に、 OFF ( false ) なら 0 に変換してダイアログに表示します。

jQuery(実行可能なサンプルコード)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="checkbox" id="sample2" class="my_check_box" />
<label for="sample2">チェックボックス・ステータス取得サンプル2</label>
 
<script>
$(function(){
    $("#sample2").on("click", function (evt) {
        //クリックされたチェックボックスのステータスを取得
        //3 項演算子で true なら 1 に、false なら 0 に変換
        chk_status = $(this).prop('checked') ? 1 : 0;
        
        //取得したステータスをダイアログに表示。ON なら 1, OFF なら 0。
        alert(chk_status);
    });
});
</script> 

実際に動作させると以下のようになります。



スポンサーリンク