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

追加要素は、
・チェックボックスを「全て選択」「全て解除」のボタンを追加。
・チェックされている件数の表示。
・チェックされている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の開始2行分の
——————————————————————–
 $(“table td input[type=checkbox]”).attr(“checked”, false);
 $(“table td input[type=checkbox]”).removeClass(“active”);
——————————————————————–
を削除して、代わりに「.each」を使ってページリロード時に
checkboxを全て見直して、チェックが「true」のものには「class=”active”」を追加。
「false」ならば「class=”active”」削除。(この動作自体要らない感じもしますが念の為)

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

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

SHARE

Comments (5)

  • たえ | 2014.12.07 12:41

    はじめましてjQueryでできるテーブル操作を探してましたらたどり着きました。

    何度も検索して探してみて、どうしてもよく分からないのですが
    例えば上記のやり方でチェックボックにチェックを入れると、
    そこのtdだけでなく、trのエリアに色が入るにはどうしたらいいでしょうか。

  • BlackFlag | 2014.12.10 0:41

    >たえさん
    コメントありがとうございます。
    当記事のスクリプトをお試しいただいている様で
    嬉しく思っております。

    trのエリアに背景色が付くようにするには
    チェックされているか、されていないかで
    trに対してクラス「active」の付与を設定することで可能だと思います。

    試しにサンプルを用意しましたので
    下記URLからソースを参照していただければと思います。

    https://black-flag.net/devel/jQueryCheckbox2/index-tr.html

    ご確認ください。
    よろしくお願いします。

  • たえ | 2014.12.10 19:16

    ご回答ありがとうございます。
    早速試してみましたが素晴らしいですね!感激している次第であります。

    もう1つ質問があるのですがよろしいでしょうか?
    テーブルを2つ作成して今回教えていただいたように、trのエリアごと変えてしまう方法と
    tdの1つのエリアのみを変える方法で共用しようと考えたのですが、どう組むと動作しますでしょうか?

    どこかにidかクラスを指定すれば、テーブル側でどちらの方の機能を使うか制御できれば思ったのですが、
    どこの箇所に付け加えると共用できそうですか。

  • BlackFlag | 2014.12.14 1:18

    >たえさん
    テーブル2つで別々の指定をするには
    table毎に任意のクラスを付けて
    スクリプト内のtable指定の部分にそれぞれのクラス名
    「$(”table.sample1・・・」「$(”table.sample2・・・」
    というように指定すればいけるかと思います。

    お試しください。
    よろしくお願いします。

  • たえ | 2014.12.14 22:22

    ありがとうござます。早速できました!
    おそらく検索でひっかかるサイトで全てのやり方を試したと思いますが…
    jQueryで両方のやり方を解説されるサイトは無かったので大変助かりました。

    レスポンシブでテーブルの形が変わっても動作するようでしたので長く重宝しそうです^^
    山ほどあるjQueryの機能をまたご参考にさせていただきます。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して