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

チェックボックスのON/OFFの状態を変更する

スポンサーリンク

jQuery でチェックボックスの ON/OFF を切り替えるには、prop に true, false をセットします。

以下のサンプルコードでは、ボタン（id:my_button1）をクリックするとチェックボックス（id:my_checkbox1）のチェック状態を切り替えることができます。

jQuery（実行可能なサンプルコード）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<input type="button"   id="my_button1" value="チェックボックス切り替え1" />
<input type="checkbox" id="my_checkbox1"/>
<label for="my_checkbox1">チェックボックス・ON/OFF切り替えサンプル1</label>
 
<script>
$(function(){
    $("#my_button1").on("click", function (evt) {
        //チェックボックスの現在のステータスを取得
        chk_status = $("#my_checkbox1").prop("checked");
        
        //取得したステータスが true なら false を、 false なら true をセットする
        if(chk_status){
            //チェックボックスをOFFにする（チェックを外す）。
            $("#my_checkbox1").prop("checked", false);
        }else{
            //チェックボックスをONにする（チェックする）。
            $("#my_checkbox1").prop("checked", true);
        }
    });
});
</script>

実際の動作は以下で確認できます。

上記コードは演算子 ! を使用することで、少しコードをスッキリさせることができます。以下のサンプルコードは上記サンプルコードと全く同じ動作をします。

jQuery（実行可能なサンプルコード）
1
2
3
4
5
6
7
8
9
10
11
12

<input type="button"   id="my_button2" value="チェックボックス切り替え2" />
<input type="checkbox" id="my_checkbox2"/>
<label for="my_checkbox2">チェックボックス・ON/OFF切り替えサンプル2</label>
 
<script>
$(function(){
    $("#my_button2").on("click", function (evt) {
        //チェックボックスの現在のステータスを取得して反転させてセット
        $("#my_checkbox2").prop("checked", !$("#my_checkbox2").prop("checked"));
    });
});
</script>

動作は以下の通りです。

▲このページの一番上に戻る
スポンサーリンク
カテゴリー
スポンサーリンク