2012年1月20日金曜日

Table のチェックボックス2

テーブル内のチェックボックスのjQuery例:
機能:
・ 全ての行選択/解除
・ trをクリックしてチェックボックスの選択/解除
・チェックボックスクリック時に tr 背景色の変更(class の値追加/削除)


 $(".all_select").click(function() {
  if($(this).attr("checked")){
   $("#table_list .selected_id").attr("checked", true);
   for(var i=0; i<$(this).parent().parent().parent().find("tr").length; i++) {
    $($(this).parent().parent().parent().find("tr").get(i)).addClass('tr-selected');
   }
  }
  else {
   $("#table_list .selected_id").attr("checked", false);
   for(var i=0; i<$(this).parent().parent().parent().find("tr").length; i++) {
    $($(this).parent().parent().parent().find("tr").get(i)).removeClass('tr-selected');
   }
  }
 });
 $('.selected_id').click(function(){
      if($(this).attr("checked")){
     $(this).attr('checked', true);
        $(this).parent().parent().addClass('tr-selected');
      }
      else{
     $(this).attr('checked', false);
        $(this).parent().parent().removeClass('tr-selected');
      }
    });
 $('.list td').click(function(){
  var mo = $(this).parent().find("input:checkbox");
  var tar = $(this).find("input:checkbox");
  console.log(tar);
  if(tar.length < 1) {
      if(mo.attr("checked")){
    mo.attr('checked', false);
    $(this).parent().removeClass('tr-selected');
      }
      else{
    mo.attr('checked', true);
    $(this).parent().addClass('tr-selected');
      }
  }
 });
ijou.