jQuery でチェックボックスの操作まとめ

いつも忘れるのでまとめました。

チェックされているかどうか調べる

is_element_checked = $element.is(':checked');

このとき、もし $element が複数の要素とマッチした場合には、ひとつでも :checked な要素があれば true が返ります。

すべてがチェックされているかどうか調べる

すべての要素がチェックされているかどうかを知りたい場合は、下記のようにひとつでも :not(:checked) な要素があるかどうかを調べて真偽を反転すれば実現できます（可読性がイマイチ……。もっといいやり方あったらコメントで教えてください。 $elements.areAll(':checked') みたいな感じのインターフェイスほしいですね）。

are_all_elements_checked = !$elements.is(':not(:checked)')

チェックをつける/はずす

CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com という記事が参考になりました。 jQuery 1.6 系からは下記のようにします。

$element.prop('checked', true);

よくある全選択/全解除の実装

こんな感じでイベントが発火した要素のチェック状態を子に引き継ぐとよいと思います。

$parent.change(function(){
    $children.prop('checked', this.checked);
});