【jQuery】checkboxにチェックが入ったときの処理

仕事でcheckboxにチェックが入ったら○○するというような処理をよく使うのでまとめ。

checkboxにチェックが入ったときの処理

仕事でたまに簡単なjQueryが必要なことがあり、都度調べながら対応する状況。

独学なので良い書き方かどうかはわかりませんが、このような処理をしています。

changeイベントを作成

checkboxにチェックが入ったときの処理なので、checkboxにchangeイベントを設定します。

$('input[type=checkbox]').change(function() {
    //処理内容
});

checked属性の取得

attrでの属性取得は要素に記述されている状態を取得します。(初期設定を取得するような感じ)

そのためformの属性取得をする場合はpropを使うのがよさそうです。

prop

propは属性値を取得、設定をすることができます。

属性値の取得

propを使った属性の取得はこのように記述します。

今回はこちらを使います。

属性値の設定

propを使った属性値の設定はこのように記述します。

処理を実行する

ifの条件式にpropでchecked属性を取得します。

propで取得したcheckedの属性値がtrueならチェックが入ったということになるので、if文はこのようになります。

if ($btn.prop('checked') {
 //チェックが入ったときの処理
} else {
 //チェックが外れたときの処理
}

サンプル

今回はこのようなHTMLを使い、checkboxのchangeイベントで#targetの段落に文字を表示します。

<p>
    <label style="margin: 1em;"><input type="checkbox" name="btn" value="サンプル">サンプル</label>
</p>
<p id="target"></p>

Javascript部分はこのようにしました。

    $(function() {
       $('input[type=checkbox]').change(function() {
           let $btn = $(this);
           if ($btn.prop('checked')) {
               $('#target').text('チェックが入りました。');
           } else {
               $('#target').text('チェックが外れました。')
           } 
       });
    });

今回はclickイベントでも動きました。

動きはこのようになります。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。