<!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. 贪心之oj.1797

    1797:金银岛 查看 提交 统计 提问 总时间限制: 3000ms 内存限制: 65536kB 描述 某天KID利用飞行器飞到了一个金银岛上,上面有许多珍贵的金属,KID虽然更喜欢各种宝石的艺术品, ...

  2. AI 蒙特卡罗算法

    蒙特卡罗算法,是一类随机算法,用于求近似解. 1.Las Vegas(拉斯维加斯)算法和蒙特卡罗算法 两者都是随机算法. 前者:要么正确解,要么错误解.采样越多,越有可能得到正确解. 后者:近似解.采 ...

  3. 【Codeforces 1106E】 Lunar New Year and Red Envelopes

    Codeforces 1106 E 题意:有\(k\)个红包,第\(i\)个红包可以在\(s_i\)到\(t_i\)的时间内抢,同时获得\(w_i\)的钱,但是抢完以后一直到\(d_i\)都不可以继续 ...

  4. QT qss 初级介绍

    这篇文章来自于QT的帮助文档,你要是看了最新版的,会发现讲解得更棒.如果你的英文不是那么好,或者说看着头疼,那还是来看此篇吧. 在此之前说一个帮助文档的特别用法,绝不仅仅是搜单词,QT的文档非常强大的 ...

  5. Android ScrollView和ListView联用，且ListView可以下拉刷新和上拉加载

    ScrollView嵌套listView且ListView可以实现上拉加载. 由于代码太长,在此只提供实现思路: 先不说上拉加载的事,咱们先回想一下,ScrollView和LsitView联用,时的解 ...

  6. kubespray -- k8s集群dashboard 访问方式

    1.参考这篇文章: https://github.com/kubernetes/dashboard/wiki/Creating-sample-user 创建用户 2.获取token 3.kubectl ...

  7. 51单片机开发板(W25Q16学习)

    教程资料 链接:https://pan.baidu.com/s/142JRSPisQO2Cu6VZ2Y5YrQ 密码:eom0 今天测试开发板的W25Q16(16Mbit--Flash)写一篇文章备忘 ...

  8. 使用Windows API进行串口编程

    使用Windows API进行串口编程   串口通信一般分为四大步:打开串口->配置串口->读写串口->关闭串口,还可以在串口上监听读写等事件.1.打开和关闭串口Windows中串口 ...

  9. 【LeetCode232】 Implement Queue using Stacks★

    1.题目描述 2.思路 思路简单,这里用一个图来举例说明: 3.java代码 public class MyQueue { Stack<Integer> stack1=new Stack& ...

  10. Luogu4173 残缺的字符串 FFT

    传送门 考虑如何使用FFT计算两个子串是否匹配.如果字符集比较小可以把每个字符都拿出来暴力做一遍,但是字符集比较大的时候复杂度就会有问题.这个时候可以考虑匹配函数. 先考虑没有通配符的情况.将\(A\ ...