正在加载中...
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中的几个方法:
slice(1)将第一行tr(一般为表头)去除绑定事件,通常表头的checkbox是用来做全选的。
toggleClass为tr注册或反注册样式tr_active,tr_active是自己定义的,可根据需要修改,一般配合着是修改背景色为深色,标识为选中状态。
选择器$(“input[type=’checkbox’]”,this)在当前tr中查出checkbox。
$(this).attr(“tag”)在tr中查找自定义标签tag。
chks.prop(“checked”,true)修改checkbox选中状态。