チェックボックスがチェックされたときと外れたときにjQueryで処理を行う方法

チェックボックスがチェックされているときとされていないときはcssでも分けることができます。

ですが今回はチェックボックスがチェックされたときにチェックされているかされていないかでクラスを追加したり外したり内容を書き換える場合の方法について紹介していきたいと思います。

まずinputなどの要素の中身が変更されたときにイベントの処理を実行したいときには「changeメソッド」を使用します。

changeメソッド

changeメソッドはinputの中身が変更されたときに実行します。

下記の場合だとinputのチェックボックスの値が変わったときに処理を実行します。

なのでチェックボックスがチェックされたときとはずれたときにイベントが開始されます。

jQuery('input[type=checkbox]').change(function() {
	～チェックボックスの内容が変更させたとき～
});

propメソッド

次にinputがクリックされたときにチェックされているのかされていないのかを判断したいときに使うのが「propメソッド」です。

jQuery('input[type=checkbox]').change(function() {
	if(jQuery(this).prop('checked')){
		～チェックボックスにチェックが入ったときに処理～
	}else{
		～チェックボックスのチェックがはずれたときの処理～
	}
});

これでチェックボックスにチェックされたときとチェックが外れたときにそれぞれ別の処理を行うことができます。

たとえばクラスを付けたり消したり、内容を書き換えたりなどの処理ができるようになります。

サンプル