attr()とprop()とchecked属性とcheckedプロパティと...

うろ覚えでいつもググってしまう悪い癖なんだけど、チェックボックスのチェックをつけたり外したりとか、ラジオボタンの選択をソースコードからしたいとかいう場合。

<input type="checkbox" id="foo">

ここで、ググって良く当たるのがattr()を使う方法だったりして、うまくいかず「はぁ?」ってなってprop()を使う方法とかに行き着いたりする。

// チェックを付ける処理
$('#foo').attr('checked', true); // これうまくいかない
$('#foo').prop('checked', true); // こっちはうまくいく

そもそもなんでattr()使ってうまくいかないんだろうか、と思って色々調べてみた。
結論からいうと、jQuery1.6.0と1.9系以降はうまくいかない、ってことみたい。

[jQuery] attr(‘checked’)で取得したチェックボックスの値が変わらない | 黒川仁の文具堂ブログ三昧

attr()は属性に対する操作を行うもので、prop()はプロパティに対する操作を行うもの。
1.5系以前や1.6.1~1.8系のattr()は属性だけでなくプロパティに対する操作もカバーしようとしていたのだが、バグが発生しやすくメンテナンスが大変だったため、属性とプロパティに対する操作を行うメソッドを完全に分けたという経緯らしい。

また、チェックボックスラジオボタンにデフォルトのチェックを入れるためのchecked属性は、あくまで初期値を示すものであり、ページが表示されたあとにチェックの状態を変更しても属性値は変わらない。
このとき変わっているのがcheckedプロパティであり、prop()で操作できる値、ってこと。

JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング (Programmer's SELECTION)

JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング (Programmer's SELECTION)

Effective JavaScript

Effective JavaScript