jQueryにてチェックボックスの状態を取得する
2013-04-01
その操作の手段としては［全選択］［全解除］というボタンが用意されていたり、ボタンの代わりに全選択／全解除用のチェックボックスが見出し欄に設けてあったりする。どちらの場合でもjQureyを知らなかった時には実装するのはそこそこ大変だったが、jQueryを使えば簡単にできる。ところが後者の場合にちょっと躓いてしまったので整理してみたい。
後者の場合というのは、全選択／全解除用のチェックボックスがクリックされた時に、チェックの状態によって全選択するか全解除するかを決める。だが、チェックボックスのチェック状態を取得しようとして以下のようなコードを書くと動きそうなのだがうまくいかない。
1 2 3 4 5 | $(function(){ $("#checkAll").click(function() { $("#anyForm :checkbox").attr("checked", $("#checkAll").attr("checked")); }); }); |
オブジェクトの属性は .attr() メソッドで取得すると覚えていた。ところが公式のドキュメントをよく読んでみると、オブジェクトの属性（プロパティ）は .prop() で取得した方が良いようだ。以前はうまくいっていたと思っていたのはボタンで実装していたからだった。公式ドキュメントの一部を抜粋して意訳しよう。
jQuery1.6より前のバージョンでは.attr()メソッドで属性を返す時にプロパティを考慮することがあり、時として矛盾した動作をすることがあった。1.6以降のバージョンでは、.prop()メソッドが厳密にプロパティを返し、その一方で.attr()メソッドは属性を返す。 （中略）
W3Cの仕様によると、checked属性は二値なので値があるときはtrue、値が無いか空の場合はfalseである。二値の属性は全て同様である。
尚、公式ドキュメントにはさらに記法による振る舞いの比較表が掲載されている。
| コード例 | jQueryバージョン | 返される値 |
|---|---|---|
elem.checked | — | true（可変） |
$(elem).prop("checked") | 1.6以降 | true（可変） |
elem.getAttribute("checked") | — | “checked”（初期状態・不変） |
$(elem).attr("checked") | 1.6.0 | “checked”（初期状態・不変） |
$(elem).attr("checked") | 1.6.1以降 | “checked”（可変） |
$(elem).attr("checked") | 1.6より前 | true（可変） |
これを見る限り以前は動いていたというのは錯覚ではなかったようだ。つまり、もしjQueryのバージョン1.6以降を利用しているのなら、先ほどのコードは次のように書かなければならないということになる。
1 2 3 4 5 | $(function(){ $("#checkAll").click(function() { $("#anyForm :checkbox").prop("checked", $("#checkAll").prop("checked")); }); }); |
| お飲み物 | |
|---|---|
| ビール（中瓶） | |
| 日本酒（1合） | |
| 焼酎 麦・芋（グラス） | |
| ウィスキー（シングル） | |
| ワイン 赤・白（グラス） |
Posted in 
Tags: