JavaScriptおれおれAdvent Calendar 2013 – 02日目
チェック状態は$checkbox.attr('checked')ではなく$checkbox.prop('checked')で得る必要があります。
検証
初期状態で確認すると
c1: attr=undefined prop=false c2: attr=checked prop=true
チェックを入れ替えて確認すると
c1: attr=undefined prop=true c2: attr=checked prop=false
というわけで
.attr()… 変わらない.prop()… 変わる（こっちを使う）
仕組み
.attr()はattribute、つまり（HTMLの）属性を得るメソッドです。HTMLにのタグにchecked属性を記載したらその値checkedが得られます。していなければ、存在しない属性の値も存在しないのでundefinedになります。
一方.prop()はproperty、つまり（JavaScriptの）プロパティを得るメソッドです。こちらは状態を正確に反映します。
この違い、こなれてくると感覚的に分かって来ますが。属性は「HTMLに書いた値」、プロパティは「状態を示す値」という事で覚えておいてください。
他にも
checkedがそうなのだからselectedもそうなるのはお分かりでしょうか。
また、やはりフォームですが、value属性の値を操作するのも$elem.attr('value')ではなく$elem.val()を使うようにしてください。HTMLに書いた属性が欲しいのか、現在の画面での状態を操作したいのか、考えてみてください。
あとは、disabledとかreadonlyとかもね。
詳しくは別記事を
昔詳しく書いたんだけど、まだときどき質問されるので。
- CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。
- jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。 （
.attr()と.prop()のどちらを使うべきか一覧表があります）
……同じネタで引っ張りすぎですか？