昨日書いたチェックボックスのクリック動作を拡張してみました。
追加要素は、
・チェックボックスを「全て選択」「全て解除」のボタンを追加。
・チェックされている件数の表示。
・チェックされている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”」削除。（この動作自体要らない感じもしますが念の為）
これでページリロード時にもチェックボックスの状態が保持されます。
初めからこっちを使った方がいいのかも。。。