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とかもね。

詳しくは別記事を

昔詳しく書いたんだけど、まだときどき質問されるので。

……同じネタで引っ張りすぎですか?