jQueryにてチェックボックスの状態を取得する


 よくWebアプリケーションで一覧表があると、それぞれのレコード(行)の頭にチェックボックスがついていて、チェックしたものをまとめて更新したり削除したりするようなUIを見かける。そして必ずと言って良いほどそれらチェックボックスの全てにチェックを入れたり外したりする操作ができるようになっている。
 その操作の手段としては[全選択][全解除]というボタンが用意されていたり、ボタンの代わりに全選択/全解除用のチェックボックスが見出し欄に設けてあったりする。どちらの場合でも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.checkedtrue(可変)
$(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合)
焼酎 麦・芋(グラス)
ウィスキー(シングル)
ワイン 赤・白(グラス)


Leave a Reply

*

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

アーカイブ