jQueryでのチェックボックスのクリック動作向上：Ver.2

昨日書いたチェックボックスのクリック動作を拡張してみました。

追加要素は、
・チェックボックスを「全て選択」「全て解除」のボタンを追加。
・チェックされている件数の表示。
・チェックされているTDの背景色を変更。（マウスオーバーとは別色）

動作サンプルは以下
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

TDの背景色はマウスオーバーでの色替えはスクリプトで制御し、
チェックが入っているTDに対してclassを追加することで、
別々の色の指定を分けています。

スクリプトはこんな感じに。

◆SCRIPT ———————————————————–
$(function(){
　$(“table td input[type=checkbox]”).attr(“checked”, false);
　$(“table td input[type=checkbox]”).removeClass(“active”);

　$(“table td:has(input[type=checkbox])”).hover(function(){
　　$(this).css(“background-color”,”#CFD3FF”);
　},function(){
　　$(this).css(“background-color”,””);
　});
　
　$(“table td:has(input[type=checkbox])”).click(function(){
　　var chkb = $(this).children(“input[type=checkbox]”);
　　if(chkb.attr(“checked”)) {
　　　chkb.attr(‘checked’, false);
　　　$(this).removeClass(“active”);
　　}else{
　　　chkb.attr(‘checked’, true);
　　　$(this).addClass(“active”);
　　}
　　cntChkd();
　　$(“:checkbox”).click(cntChkd);
　});
　$(“table td input[type=checkbox]”).click(function(){
　　var chkb = $(this).children(“input[type=checkbox]”);
　　if($(this).attr(“checked”)) {
　　　$(this).attr(‘checked’, false);
　　　$(this).parent().removeClass(“active”);
　　}else{
　　　$(this).attr(‘checked’, true);
　　　$(this).parent().addClass(“active”);
　　}
　　cntChkd();
　　$(“:checkbox”).click(cntChkd);
　});
　//全て選択
　$(“input#allcheck”).click(function(){
　　var chkb = $(this).children(“input[type=checkbox]”);
　　$(“table td input[type=checkbox]”).attr(‘checked’, true);
　　$(“table td input[type=checkbox]”).parent().addClass(“active”);
　　cntChkd();
　　$(“:checkbox”).click(cntChkd);
　　return false;
　});
　//全て解除
　$(“input#alluncheck”).click(function(){
　　var chkb = $(this).children(“input[type=checkbox]”);
　　$(“table td input[type=checkbox]”).attr(‘checked’, false);
　　$(“table td input[type=checkbox]”).parent().removeClass(“active”);
　　cntChkd();
　　$(“:checkbox”).click(cntChkd);
　　return false;
　});
　//チェック数カウント
　function cntChkd() {
　　var cnt = $(“table td input[type=checkbox]:checked”).length;
　　$(“#check_number”).text(cnt);
　}
});
——————————————————————–

なんだか無駄に長くなってしまった感もあり。。。
もっと短くできたかも。。。

■■■■■■■■■■2010年4月5日【追記】■■■■■■■■■■

上記スクリプトはページリロード際に
チェックボックスを全て「false」にする指定が入っています。

システムと大きく絡むページ構成の場合
こいつが邪魔な動作になることがあるので
その際は以下の様にスクリプトを変更することで対応可能。

◆SCRIPT ———————————————————–
$(function(){
　$(“table td:has(input[type=checkbox])”).hover(function(){
　　$(this).css(“background-color”,”#CFD3FF”);
　},function(){
　　$(this).css(“background-color”,””);
　});
　
　$(“table td:has(input[type=checkbox])”).each(function(){
　　var chkb = $(this).children(“input[type=checkbox]”);
　　if(chkb.attr(“checked”)) {
　　　chkb.attr(‘checked’, true);
　　　$(this).addClass(“active”);
　　}else{
　　　chkb.attr(‘checked’, false);
　　　$(this).removeClass(“active”);
　　}
　cntChkd();
　$(“:checkbox”).click(cntChkd);
　});
　$(“table td:has(input[type=checkbox])”).click(function(){
　　var chkb = $(this).children(“input[type=checkbox]”);
　　if(chkb.attr(“checked”)) {
　　　chkb.attr(‘checked’, false);
　　　$(this).removeClass(“active”);
　　}else{
　　　chkb.attr(‘checked’, true);
　　　$(this).addClass(“active”);
　　}
　　cntChkd();
　　$(“:checkbox”).click(cntChkd);
　});
　$(“table td input[type=checkbox]”).click(function(){
　　var chkb = $(this).children(“input[type=checkbox]”);
　　if($(this).attr(“checked”)) {
　　　$(this).attr(‘checked’, false);
　　　$(this).parent().removeClass(“active”);
　　}else{
　　　$(this).attr(‘checked’, true);
　　　$(this).parent().addClass(“active”);
　　}
　　cntChkd();
　　$(“:checkbox”).click(cntChkd);
　});
　//全て選択
　$(“input#allcheck”).click(function(){
　　var chkb = $(this).children(“input[type=checkbox]”);
　　$(“table td input[type=checkbox]”).attr(‘checked’, true);
　　$(“table td input[type=checkbox]”).parent().addClass(“active”);
　　cntChkd();
　　$(“:checkbox”).click(cntChkd);
　　return false;
　});
　//全て解除
　$(“input#alluncheck”).click(function(){
　　var chkb = $(this).children(“input[type=checkbox]”);
　　$(“table td input[type=checkbox]”).attr(‘checked’, false);
　　$(“table td input[type=checkbox]”).parent().removeClass(“active”);
　　cntChkd();
　　$(“:checkbox”).click(cntChkd);
　　return false;
　});
　//チェック数カウント
　function cntChkd() {
　　var cnt = $(“table td input[type=checkbox]:checked”).length;
　　$(“#check_number”).text(cnt);
　}
});
——————————————————————–

functionの開始２行分の
——————————————————————–
　$(“table td input[type=checkbox]”).attr(“checked”, false);
　$(“table td input[type=checkbox]”).removeClass(“active”);
——————————————————————–
を削除して、代わりに「.each」を使ってページリロード時に
checkboxを全て見直して、チェックが「true」のものには「class=”active”」を追加。
「false」ならば「class=”active”」削除。（この動作自体要らない感じもしますが念の為）

これでページリロード時にもチェックボックスの状態が保持されます。

初めからこっちを使った方がいいのかも。。。