点击一行来实现选中checkbox复选框，比点击小小的复选框本身更加人性化和便利，实现鼠标点击表格行元素，就可以选中所在行内的复选框，实现数据勾选效果。万维景盛工程师为您分享用jquery实现点击行任意区域实现选中复选框的方法。万维景盛提供阿里云服务器代购服务，如果您通过我司，可以享受折上折优惠，同时免费享受全能运行环境和豪华虚拟主机控制面板。 

效果

录制了一个简单的动画来呈现。 

方法

这里采用jQuery框架做实现，当然原生的js也可以实现，只是麻烦一些。

$(function () {
   //除了表头（第一行）以外所有的行添加click事件.
   $("tr").slice(1).click(function () {
       // 切换样式
       $(this).toggleClass("tr_active");        // 找到checkbox对象
       var chks = $("input[type='checkbox']",this);        var tag = $(this).attr("tag");        if(tag=="selected"){            // 之前已选中，设置为未选中
           $(this).attr("tag","");
           chks.prop("checked",false);
       }else{            // 之前未选中，设置为选中
           $(this).attr("tag","selected");
           chks.prop("checked",true);
       }
   });
});

说明

代码比较简单，主要用到jQuery中的几个方法：

1. slice(1)将第一行tr（一般为表头）去除绑定事件，通常表头的checkbox是用来做全选的。

2. toggleClass为tr注册或反注册样式tr_active，tr_active是自己定义的，可根据需要修改，一般配合着是修改背景色为深色，标识为选中状态。

3. 选择器$(“input[type=’checkbox’]”,this)在当前tr中查出checkbox。

4. $(this).attr(“tag”)在tr中查找自定义标签tag。

5. chks.prop(“checked”,true)修改checkbox选中状态。