点击tr如何实现单元格里的复选框被勾选状态?

JS实现点击tr复选框被勾选状态,不是一个常规的点击效果事件,百度了一番,才找到了解决方案,来看一下如何实现复选框在点击tr的情况下被勾选
 点击table的tr,如果tr出现了背景色,那么tr里的复选框checkbox为选中状态;反之,取消背景色并去掉复选框的选中状态!

 

 一般情况下,我们首先想到的是常规写法:

  1. $("tbody>tr").click(function(){     
  2.     var hased=$(this).hasClass("bgColor"); //此处的“bgColor”为tr的css背景色class样式    
  3.     if(hased){  
  4.         $(this).removeClass("bgColor").find("input[type=checkbox]").attr("checked",false)     
  5.     } else{         
  6.         $(this).addClass("bgColor").find("input[type=checkbox]").attr("checked","checked")     
  7.     } 
  8. }); 

但是,运行代码后发现,点击tr的时候,背景色是有了,可里面的复选框是处在没被勾选的状态,审查元素发现,checkbox复选框的属性里却有checked="checked"!!!!

没有实现复选框的勾选
没有实现复选框的勾选

 

解决办法:

  1. $("table tr").each(function(){   
  2.         var _this = this;   
  3.         $(this).children().slice(1).click(function(){//关键,过滤复选框所在的td的点击事件冲突   
  4.             $($(_this).children()[0]).children().each(function(){   
  5.                 if(this.type=="checkbox"){   
  6.                     if(!this.checked){   
  7.                         this.checked = true;   
  8.                         $(_this).addClass("ed"
  9.                     }else{   
  10.                         this.checked = false;   
  11.                         $(_this).removeClass("ed"
  12.                     }   
  13.                 }   
  14.             });   
  15.         });   
  16.     }); 

 

实现了复选框的勾选状态
实现了复选框的勾选状态

原因:是由于点击事件tr会触发td的点击事件,导致事件冲突,继而无法实现想要的效果

 

相关经验

导读书签
书签初始化中…