复选框怎么点td选中_jQuery点击tr实现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);
}
});
});
复选框怎么点td选中_jQuery点击tr实现checkbox选中的方法相关推荐
- php表单复选传值,jQuery+SpringMVC中的复选框选择与传值实例_jquery
下面我就为大家分享一篇jQuery+SpringMVC中的复选框选择与传值实例,具有很好的参考价值,希望对大家有所帮助. 一.checkbox选择 在jQuery中,选中checkbox通用的两种方式 ...
- html5复选框控制按钮状态,HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件...
本篇教程探讨了HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < ...
- html改变复选框颜色,如何利用纯CSS改变html?radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...
- el如何获取复选框的值_element ui 表格提交时获取所有选中的checkbox的数据
设定此属性@selection-change="changeFun",意思是每次勾选的时候都会触发这个事件 //复选框状态改变 changeFun(val) { this.mult ...
- html清空复选框的值,html,删除复选框选中的内容
首先是选中复选框,可以自己单击一个个的选,这个就不用多说了吧!也可以批量操作,如用全选按钮,主要是设置复选框的.checked值.可以通过调用javascript函数来实现. 方法如下: 复选框的定义 ...
- input复选框,返回选中状态的的value值
个人常用的,方法很多,这只是其中一种. 首先创建一个数组,把每次选中的值添加到这个数组中,然后返回出来. <div class="layui-input-block" id= ...
- 复选框checkbox如何一直选中,不能去掉勾选
在工作中遇到一个问题,那就是多个复选框,有一项是要求一直都要被选中的,不能去掉勾选,如果用了<input type="checkbox" disabled>的disab ...
- 复选框的遍历和选中设置
复选框设置 <strong>应分配部门:</strong><input type="checkbox" name="fpbm" ο ...
- 使用JQuery做一组复选框的功能。
之前做过复选框的功能,奈何笔记丢失,害的我又鼓捣了一番...还是博客园做笔记比较好. 假设现在有一个表格,每一行都有一个复选框按钮.在表头还有一个全选的复选框按钮. ①.当点击一个全选按钮时,下面的同 ...
最新文章
- Linux 系统学习梳理_【All】
- 记录遇到的Altium designer显示布线未完成坑
- 7.OD-字符串参考
- opencv矩阵掩膜操作(提高图片对比度)
- php在线考试系统源代码_php实现在线考试系统
- 蒋本珊计算机组成原理知识点笔记,计算机组成原理习题答案解析(蒋本珊)
- Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库,和 Moment.js 的 API 设计保持完全一样,dayjs...
- 中国移动企业文化考试试题含答案
- 一文读懂什么是绿色工厂以及绿色工厂建设细解
- 用QEMU搭建arm开发环境之一:QEMU能干啥
- 30岁宝妈转行UI设计,后来怎么样了?
- 如何用单片机控制可控硅c语言程序,可控硅的斩波控制的实现--C语言源代码
- 通过百世单号自动识别快递公司,并查询大量物流情况
- php增加vip等级设置,会员管理系统中商家如何设置会员等级
- C语言——printf()函数参数传递问题
- 三阶矩阵的lu分解详细步骤_计算方法(三)矩阵分解2-LU分解
- xxxxxx 不在 sudoers 文件中。此事将被报告
- tdk磁材手册_TDK 集团发布关于铝电解电容器的完整修订版 《数据手册》
- 微信app hook修改剪刀石头布以及骰子思路
- 一亿个数 top100
热门文章
- 领域应用 | 知识计算,华为云赋能企业知识化转型
- 神经网络不应视为模型,推理过程当为机器学习问题一等公民
- RuntimeError: Expected object of device type cuda but got device type cpu for argument #2 'target'
- 事理图谱:一种纯学术需求、无法落地、漏洞百出的新技术或新概念?
- Solr 访问 403 错误
- 知道一个数组某个index对应的值 不知道下标的情况下删除该值
- Linux下grub.cnf详解
- 10天学安卓-第二天
- 跟我学Telerik公司的RadControls控件(四)
- 牛客16502 螺旋矩阵