JavaScript ›

jQueryでチェックボックスの値を取得・全選択・外す

チェックボックスを全選択、とか、jQueryでチェックボックスの値を取得したり変更する方法です。.prop()を使っときゃいいみたいな記事をみかけたので一応、不具合対策も含めた自分なりのやり方をメモしておきます。

HTMLでは、チェックされたチェックボックスにはchecked属性が付加されます。ただ、jQueryでチェックボックスの操作や値の取得をするのに、.attr()を使ってchecked属性の値を得たりイジったりしただけではうまくいきません。チェックしてもchecked属性が付かなかったりブラウザのUIが反応しない場合に備えてjQueryオブジェクトの.prop()と.change()を併用して使います。

.prop()は、jQueryオブジェクトのプロパティです。.attr()と似ていますが、HTMLタグの属性を扱うわけではないので使い方が異なります。後からチェックを入れてもHTML上のチェックボックスにはchecked属性が付かない場合があるため、チェック有無を調べるには.prop()が適しています。

チェックボックスの値を取得する

var $checkbox = $('input[type="checkbox"]');

alert(
  $checkbox.attr('checked') || $checkbox.prop('checked') ?
  'チェックしちゃいましたね。' : 'チェックしませんでしたね。'
);

.prop()はバージョン1.6か7くらいからしか使えません。チェック状態の変更時にchecked属性も操作するようにしておけば.attr()でもうまく取得できるようになります。

チェックを入れる・チェックを外す

var $checkbox = $('input[type="checkbox"]');

// チェックを入れる
$checkbox.attr('checked', true).prop('checked', true).change();

// チェックを外す
$checkbox.removeAttr('checked').prop('checked', false).change();

値を取得するだけであれば.prop()だけでいいですが、スクリプトでチェックボックスを操作してチェック状態を変更した場合、ブラウザのUIが反応しないことがあります。そのため、.change()で強制的にイベントを発生させてうまく表示できるようにします。

また、チェック状態の変更の際には.attr()でchecked属性の追加／削除も行なっておけば、HTML上でも辻褄が合うのでトラブルを起こす可能性を低くすることができます。チェックを外す場合は.removeAttr('checked')で属性を取っ払うようにしておきます。

関連する記事