正在加载中...

jQuery通过点击表格(table)行(tr)实现选中本行中的Input checkbox

jQuery通过点击表格(table)行(tr)实现选中本行中的Input checkbox

点击一行来实现选中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选中状态。



返回上一页