• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery点击tr实现checkbox选中的方法

jQuery点击tr实现checkbox选中的方法

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jQuery,tr,checkbox等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

标题描述的有点不贴切,但希望大家能够明白,为了更形像的表达,我特意录制了一张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属性;

主要实现的代码:

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16使用jquery判断一个元素是否含有一个指定的类(class)实例
  • 2017-08-16jquery实现多级下拉菜单的实例代码
  • 2017-08-16关于jQuery中fade(),show()起始位置的一点小发现
  • 2017-08-16jquery判断复选框是否被选中的方法
  • 2017-08-16ajax异步刷新实现更新数据库
  • 2017-08-16当鼠标移动到图片上时跟随鼠标显示放大的图片效果
  • 2017-08-16jQuery插件MixItUp实现动画过滤和排序
  • 2017-08-16基于jquery的商品展示放大镜
  • 2017-08-16jQuery中parents()和parent()的区别分析
  • 2017-08-16jquery使用ajax实现微信自动回复插件

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JQuery for与each性能比较分析
    • jQuery如何实现点击页面获得当前点击元素的id或其他信息
    • Visual Studio中的jQuery智能提示设置方法
    • jQuery.Validate验证库的使用介绍
    • jQuery+PHP实现动态数字展示特效
    • ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
    • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
    • jQuery文本框(input textare)事件绑定方法教程
    • jQuery ajax BUG:object doesn't support this property or method
    • 使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有