ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript:jQuery:jQueryのバージョンによって違う動作

一覧表のチェックボックス全てに、一括でチェックを入れる全選択ボタンと、一括でチェックを外す全解除ボタンを作成しました。

処理のJavaScriptは、以前のソースコードを流用して、以下のコードで動作確認をしました。

$('#all_select').click(function() {
    $("table").find("input[name='sendcheck']").attr('checked', true);
});

$('#all_cancel').click(function() {
    $("table").find("input[name='sendcheck']").attr('checked', false);
});

 

チェックが入らない 

確認すると、全選択をクリックして、全解除をクリックすると、チェックが入って、チェックが外れますが、2回目以降は全選択をクリックしても、チェックが入りません。

リロードして同じ手順を試すと、同じ現象が発生します。

Google Chromeのデバッガで見ても、エラーがでているわけではないので、書き方が間違っているわけでもないし、1回目は動作しているので、コードが間違っているわけでもありません。

 

意外な原因

コードをいろいろ変えて試しても解決しなかったので検索したところ、jQueryのバージョン1.10あたりからは、以下のようにattr()ではなくprop()を使わないと動作しなくなっているようです。

$('#all_select').click(function() {
    $("table").find("input[name='sendcheck']").prop('checked', true);
});

$('#all_cancel').click(function() {
    $("table").find("input[name='sendcheck']").prop('checked', false);
});

上記のコードにしたら、予定通りの動作をするようになりました。

 

上記のようなことは他にもあるかもしれないので、気を付けたいです。