<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
<style> table{
border:1px solid #000;
width: 400px;
text-align: center;
border-collapse: collapse;
}
thead tr{
border: 1px solid #000;
}
.selected{
background:red;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr><td><input id="d1" type="checkbox"/></td><td>张山1</td><td>男</td><td>浙江宁波</td></tr>
<tr><td><input id="d2" type="checkbox"/></td><td>张山2</td><td>男</td><td>浙江宁波</td></tr>
<tr><td><input id="d3" type="checkbox"/></td><td>张山3</td><td>男</td><td>浙江宁波</td></tr>
<tr><td><input id="d4" type="checkbox"/></td><td>张山4</td><td>男</td><td>浙江宁波</td></tr>
<tr><td><input id="d5" type="checkbox"/></td><td>张山5</td><td>男</td><td>浙江宁波</td></tr>
<tr><td><input id="d6" type="checkbox"/></td><td>张山6</td><td>男</td><td>浙江宁波</td></tr>
</tbody>
</table>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
//jquery有一些弊病,checked这样的是没有属性值的,不能用attr("checked",true)
$(function(){
$('tbody>tr').click(function(){
var $thisonly=$(this);
if($thisonly.hasClass('selected')){
$thisonly.removeClass('selected');
$thisonly.find(':checkbox')[0].checked=false;
}else{
$thisonly.addClass('selected').siblings().removeClass('selected');
$thisonly.find(':checkbox')[0].checked=true;
$('table :checkbox:checked').parent().parent().addClass('selected');
}
}
)
})
</script>
</html>

Jquery 组 checkbox双向控制与tr变色的更多相关文章

  1. Jquery 组 checkbox全选checkbox

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  2. Jquery 组 checkbox全选按钮

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  3. 点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

    给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...

  4. Jquery实现数据双向绑定(赋值和取值),类似AngularJS

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  5. jQuery实现CheckBox全选、全不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery对checkbox的各种操作

    //注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上(包含)建议用prop //1.根据id获取checkbox $("# ...

  7. C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  8. JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JQuery操作CheckBox 第二次无法选中的问题

    用JQuery做CheckBox全选和反选的时候,遇到一个问题.当用JQ控制全选,全取消一次以后,再次点击全选,发现代码变了,但是CheckBox没有处于选中状态. 百度后得知: 我使用的方法是 $( ...

随机推荐

  1. Arduino IDE for ESP8266教程(0)配置IDE

    淘宝链接 https://detail.tmall.com/item.htm?id=540067174120&spm=a1z09.2.0.0.6f7c6509ujAvQs&_u=71q ...

  2. js 格式为2018-08-25 11:46:29 的日期比较方法

    //判断日期,时间大小 function compareTime(startDate, endDate) { if (startDate.length > 0 && endDat ...

  3. 用脚本将excel,csv等文件导入数据库

    文章转自 http://blog.csdn.net/lky5387/article/details/6043009 1.--导excel文件 select  订单编码 from OpenRowSet( ...

  4. 使用Mongoose类库实现简单的增删改查

    使用Mongoose类库实现简单的增删改查 Mongoose是在nodejs环境中对MongoDB数据库操作的封装,一种对象模型工具,可以将数据库中的数据转换为javascript对象供我们使用. M ...

  5. linux公钥和私钥生成

    1. 路径 cd /root/.ssh 2. 输入命令 ssh-keygen -t rsa  按三次回车 3. 会依次生成  id_rsa 私钥和 id_rsa.pub 公钥 [root@insure ...

  6. Java原子类AtomicInteger实现原理的一点总结

    java原子类不多,包路径位于:java.util.concurrent.atomic,大致有如下的类: java.util.concurrent.atomic.AtomicBoolean java. ...

  7. Tensorflow[源码安装时bazel行为解析]

    0. 引言 通过源码方式安装,并进行一定程度的解读,有助于理解tensorflow源码,本文主要基于tensorflow v1.8源码,并借鉴于如何阅读TensorFlow源码. 首先,自然是需要去b ...

  8. 读取Excel的记录并导入SQL数据库

    准备一下,近段时间,需要把Excel的数据导入数据库中. 引用命名空间: using System.Configuration; using System.Data; using System.Dat ...

  9. 【转】分布式一致性算法:Raft 算法(Raft 论文翻译)

    编者按:这篇文章来自简书的一个位博主Jeffbond,读了好几遍,翻译的质量比较高,原文链接:分布式一致性算法:Raft 算法(Raft 论文翻译),版权一切归原译者. 同时,第6部分的集群成员变更读 ...

  10. .NET Core在类库中读取配置文件appsettings.json

    在.NET Framework框架时代我们的应用配置内容一般都是写在Web.config或者App.config文件中,读取这两个配置文件只需要引用System.Configuration程序集,分别 ...