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);
}
});
});
相关推荐
-
jQuery实现点击行选中或取消CheckBox的方法
本文实例讲述了jQuery实现点击行选中或取消CheckBox的方法.分享给大家供大家参考,具体如下: /// <summary> /// 点击行选中或者取消CheckBox /// </summary> /// <param name="TableID">表ID</param> function SetCheckBox_Check(TableID) { var $TableID = TableID == "" ? &
-
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
jQuery判断checkbox(复选框)是否被选中:if($("#id").attr("checked")==true) jQuery实现checkbox(复选框)选中.全选/反选代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
-
jquery判断checkbox(复选框)是否被选中的代码
复制代码 代码如下: //是否被选中验证有选中的return true,否return false function mycheckbox() { var falg = 0; $("input[name='soft[]']:checkbox").each(function () { if ($(this).attr("checked")) { falg += 1; } }) if (falg > 0) return true; else return fals
-
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
本文实例讲述了jQuery将所有被选中的checkbox某个属性值连接成字符串的方法.分享给大家供大家参考.具体如下: 需求: 对于一组checkbox,当点击每个checkbox后,把当前处于选中状态的checkbox的某个属性值取出来连接成字符串,并以逗号分开. 实现方法: html部分: 复制代码 代码如下: <input type="checkbox" id="1"/> <label for="1">选项一<
-
jquery无法设置checkbox选中即没有变成选中状态
复制代码 代码如下: $("input").attr("checked","checked") 设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,而且,值为checked,但是页面显示仍然为未选中状态 复制代码 代码如下: $("input").prop("checked",true); ttributes和properties之间的差异在特
-
Jquery遍历checkbox获取选中项value值的方法
源码: 复制代码 代码如下: jQuery(function($){ $("input[name='key']:checkbox").click(function(){ var ids = ''; var flag = 0; $("#ids").attr("value",ids); $("input[name='key']:checkbox").each(function(){ if (true == $(this).attr
-
jQuery判断checkbox是否选中的3种方法
网上大多数文章都提供的方法都是无效的,害死个人,本文中的方法小编亲测试有效,建议使用方法二: 方法一: if ($("#checkbox-id")get(0).checked) { // do something } 方法二: if($('#checkbox-id').is(':checked')) { // do something } 方法三: if ($('#checkbox-id').attr('checked')) { // do something
-
jQuery中获取checkbox选中项等操作及注意事项
1. 获取checkbox的选中项 2. checkbox选项的全选 反选操作 用于测试的checkbox代码段: 复制代码 代码如下: <div> <input type="checkbox" name="abc" value="一年级" id="in1" checked="checked" /><label for="in1">
-
jQuery操作CheckBox的方法介绍(选中,取消,取值)
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New document.nbsp;</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=U
-
jQuery点击tr实现checkbox选中的方法
标题描述的有点不贴切,但希望大家能够明白,为了更形像的表达,我特意录制了一张GIF动画图片. 我不知道实际开发中有没有用到这种效果,但我个人认为,这种方式更人性化,因为只要点到一行,就可以使CheckBox.checked=true: 不用非得点复选按钮才能实现; 实现的过程有点纠结,试了几次都没成,最后用了一个笨笨的方法,就是点击行的时候,让他的子元素(td)的背景颜色为红色.(因为我用到了光棒效果,如果我点击行(td)的时候,颜色是变了,但鼠标一离开的时候就又变回原来的颜色了) 可能你会问我
-
JQuery点击行tr实现checkBox选中的简单实例
$(function () { //除了表头(第一行)以外所有的行添加click事件. $("tr").first().nextAll().click(function () { //为点击的这一行切换样式bgRed里的代码:background-color:#FF0000; $(this).children().toggleClass("bgRed"); //判断td标记的背景颜色和body的背景颜色是否相同; if ($(this).children().css
-
jQuery checkbox选中问题之prop与attr注意点分析
本文实例分析了jQuery checkbox选中问题之prop与attr注意点.分享给大家供大家参考,具体如下: 一个网上很多的例子如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or
-
动态获取复选框checkbox选中个数的jquery代码
今天碰到"jquery动态获取复选框checkbox选中的个数",首先看下面例子: 复制代码 代码如下: <input type="checkbox" checked="checked">python<br> <input type="checkbox" checked="checked">java<br> <input type="check
-
浅谈jquery设置和获得checkbox选中的问题
1. 设置checkbox选中: //选中多选框 checkbox=$("#agentinfo input[name='veri[]']"); //循环多选框中的值 checkbox.each(function(){ for(var j=0;j<data.veri.length;j++){ //判断当前值是否在数组中 if($(this).val() == data.veri[j]){ $(this).attr('checked','checked');//选中 } } });
-
jQuery点击导航栏选中更换样式的实现代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit
-
jQuery获取checkbox选中的值
1.问题背景 有几个多选框,选择其中的几个,获取选中的值 2.设计结果如下图所示: 3.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
jquery取radio单选按钮的值 复制代码 代码如下: $("input[name='items']:checked").val(); 另:判断radio是否选中并取得选中的值 如下所示: 复制代码 代码如下: function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){ alert("yes--选中的值为:"+$
-
jquery判断至少有一个checkbox被选中的方法
本文实例讲述了jquery判断至少有一个checkbox被选中的方法.分享给大家供大家参考.具体实现方法如下: html代码部分: <form> <!-- bunch of checkboxes like: --> <input type="checkbox" ... > <input type="checkbox" ... > <!-- submit button, defaults to disabled -
-
jQuery遍历页面所有CheckBox查看是否被选中的方法
本文实例讲述了jQuery遍历页面所有CheckBox查看是否被选中的方法.分享给大家供大家参考.具体如下: $('#tbl').find(':checkbox').each(function(){ if ($(this).is(":checked")) { //操作 } }); 希望本文所述对大家的jQuery程序设计有所帮助.
随机推荐
- jquery(1.3.2) 高亮选中图片边框
- iOS延迟执行方法详解
- iOS App中UITableView左滑出现删除按钮及其cell的重用
- ASP.NET实现的简单易用文件上传类
- .net 页面指定区域打印的方法
- php使用fsockopen函数发送post,get请求获取网页内容的方法
- Android Doze模式启用和恢复详解
- jquery、js调用iframe父窗口与子窗口元素的方法整理
- BootStrap 附加导航组件
- JavaScript判断两种格式的输入日期的正确性的代码
- sql 查询记录数结果集某个区间内记录
- jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
- Zero Clipboard js+swf实现的复制功能使用方法
- IE最新安全漏洞补救几大措施
- android中把文件保存到sdcard代码实例
- Android自定义ViewGroup实现标签流容器FlowLayout
- IISExpress 配置允许外部访问详细介绍
- C++ auto类型说明符
- Python+tkinter使用40行代码实现计算器功能
- laravel使用Redis实现网站缓存读取的方法详解