一覧表のチェックボックス全てに、一括でチェックを入れる全選択ボタンと、一括でチェックを外す全解除ボタンを作成しました。
処理の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);
});
上記のコードにしたら、予定通りの動作をするようになりました。
上記のようなことは他にもあるかもしれないので、気を付けたいです。