JQuery点击行 (tr)实现checkBox选中

简介: 标题描述的有点不贴切,但希望大家能够明白,为了更形像的表达,我特意录制了一张GIF动画图片。 我不知道实际开发中有没有用到这种效果,但我个人认为,这种方式更人性化,因为只要点到一行,就可以使CheckBox.

标题描述的有点不贴切,但希望大家能够明白,为了更形像的表达,我特意录制了一张GIF动画图片。

 

我不知道实际开发中有没有用到这种效果,但我个人认为,这种方式更人性化,因为只要点到一行,就可以使CheckBox.checked=true; 不用非得点复选按钮才能实现;

实现的过程有点纠结,试了几次都没成,最后用了一个笨笨的方法,就是点击行的时候,让他的子元素(td)的背景颜色为红色.(因为我用到了光棒效果,如果我点击行(td)的时候,颜色是变了,但鼠标一离开的时候就又变回原来的颜色了)

可能你会问我了,那你咋判断CheckBox的状态是不是checked(勾选状态)啊? 

其实我根本没去对它进行判断.... 希望大家不要喷我。我只是判断了一下选中行的子元素(td)的背景颜色和document.body的背景颜色是不是一样,如果一样,就让CheckBox.checked=true,不一样就让CheckBox.checked=false.

思路就是这么个思路,如果谁还有更好的方法贴上来,大家一起学习学习..

Jquery中用到的方法:

first():第一个元素;

nextAll():在XX之后的所有元素:主要为了把第一行的表头去掉

children():查找子元素; 

toggleClass();切换样式

attr():给CheckBox添加checked属性;

主要实现的代码:

        $(function () {
            //除了表头(第一行)以外所有的行添加click事件.
            $(
" tr " ).first().nextAll().click(function () {
                //为点击的这一行切换样式bgRed里的代码:background-color:#FF0000;
                $(
this ).children().toggleClass( " bgRed " );
                //判断td标记的背景颜色和body的背景颜色是否相同;
                
if  ($( this ).children().css( " background-color " !=  $(document.body).css( " background-color " )) {
                    //如果相同,CheckBox.checked=true;
                    $(
this ).children().first().children().attr( " checked " true );

                } 
else  {
                    //如果不同,CheckBox.checked=false;
                    $(
this ).children().first().children().attr( " checked " false );
                }
            });
       });

 

目录
相关文章
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
207 1
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
159 1
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
JavaScript
jQuery数据结构渲染(4):复选框checkbox赋值
jQuery数据结构渲染(4):复选框checkbox赋值
187 1
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
218 0
jQuery点击图片来回切换功能
|
JavaScript 数据库
jQuery点击图片开启,再次点击图片关闭效果
jQuery点击图片开启,再次点击图片关闭效果
178 0
|
JavaScript
jQuery取消checkbox选中状态
jQuery取消checkbox选中状态
181 0
|
JavaScript
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
291 0
|
JavaScript
jquery 使用attr方法对checkBox进行全选和反选操作
一次点击按钮进行全选的时候,checkbox全部选中;再次点击的时候,checkbox取消选中。 第二次,第三次,之后再点击,没有效果,代码也执行。checkbox的checked属性也改变,但是checkbox就是没有 被选中。问题解决办法是把红色部分中的attr方法修改
311 0
|
JavaScript 前端开发 移动开发
jquery 对checkbox的操作
昨天群里一个朋友 问了一些关于jquery 操作checkbox的问题,今天写了一个小小的例子,供大家参考 例子里面包括了一下几个功能。                 代码       New Document           ...
942 0