<!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程序集,分别 ...