チェックボックスのチェック状態変更イベントを使いこなしてインタラクティブなWebページを作成しよう

2024-04-02

jQueryでチェックボックスのチェック状態変更イベントを扱う

イベントの種類

チェックボックスのチェック状態変更イベントには、主に以下の2種類があります。

changeイベント: チェックボックスのチェック状態が変更されたときに発生します。

イベントハンドラは、イベントが発生したときに実行される関数を指します。jQueryを使用してイベントハンドラを登録するには、以下の方法があります。

on() メソッドを使用する

$(selector).on(eventName, eventHandler);

selector: イベントハンドラを登録する要素のセレクタ
eventName: イベント名
eventHandler: イベント発生時に実行される関数

例:

$('input[type="checkbox"]').on('change', function() {
  // チェック状態が変更されたときの処理
});

$(selector).change(eventHandler);

$('input[type="checkbox"]').change(function() {
  // チェック状態が変更されたときの処理
});

$(selector).click(eventHandler);

$('input[type="checkbox"]').click(function() {
  // チェックボックスをクリックしたときの処理
});

イベントハンドラ内で実行される処理は、目的に応じて自由に変更することができます。

チェックボックスのチェック状態を取得する
その他の処理を実行する

イベントハンドラを解除するには、以下の方法があります。

$(selector).off(eventName);

$('input[type="checkbox"]').off('change');

$(selector).unbind(eventName);

$('input[type="checkbox"]').unbind('change');

jQueryを使用してチェックボックスのチェック状態変更イベントを扱う方法は、上記の通りです。これらの方法を参考に、Webページのインタラクティブ性を高めてください。

<input type="checkbox" id="checkbox1">
<label for="checkbox1">チェックボックス1</label>

<input type="checkbox" id="checkbox2">
<label for="checkbox2">チェックボックス2</label>

<script>
$(document).ready(function() {
  // チェックボックス1のチェック状態変更イベント
  $('#checkbox1').change(function() {
    if ($(this).is(':checked')) {
      // チェックボックスが選択されたときの処理
      alert('チェックボックス1が選択されました');
    } else {
      // チェックボックスが選択解除されたときの処理
      alert('チェックボックス1が選択解除されました');
    }
  });

  // チェックボックス2のチェック状態変更イベント
  $('#checkbox2').change(function() {
    if ($(this).is(':checked')) {
      // チェックボックスが選択されたときの処理
      alert('チェックボックス2が選択されました');
    } else {
      // チェックボックスが選択解除されたときの処理
      alert('チェックボックス2が選択解除されました');
    }
  });
});
</script>

このコードを実行すると、チェックボックス1またはチェックボックス2をクリックするたびに、それぞれのアラートメッセージが表示されます。

チェックボックスを無効/有効にする
チェックボックスをすべて選択/選択解除する

これらのサンプルコードは、jQuery公式サイトやその他のWebサイトで簡単に見つけることができます。

サンプルコードを参考に、チェックボックスのチェック状態変更イベントをさまざまな目的に活用してください。

チェックボックスのチェック状態変更イベントを扱うその他の方法

JavaScript

onchange イベント属性を使用する

<input type="checkbox" id="checkbox" onchange="myFunction()">
<label for="checkbox">チェックボックス</label>

<script>
function myFunction() {
  // チェック状態が変更されたときの処理
  alert('チェックボックスのチェック状態が変更されました');
}
</script>

addEventListener() メソッドを使用する

<input type="checkbox" id="checkbox">
<label for="checkbox">チェックボックス</label>

<script>
const checkbox = document.getElementById('checkbox');

checkbox.addEventListener('change', function() {
  // チェック状態が変更されたときの処理
  alert('チェックボックスのチェック状態が変更されました');
});
</script>