<!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. 项目Alpha冲刺 3

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第三天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...

  2. elasticsearch6.1 安装问题

    问题:Caused by: java.lang.RuntimeException: can not run elasticsearch as root [root@localhost logs]# a ...

  3. android java.lang.NoClassDefFoundError: cn.yw.lib.viewpagerfragment.ViewPagerFragmentActivity

    假如你判断你的项目没有异常,并且该注册的Activity也注册了.那么解决这个问题的方法就是:右击项目->properties->Java Build Path->Order and ...

  4. ueditor保存出现 从客户端(Note="<p>12345</p>")中检测到有潜在危险的 Request.Form 值

    检测到有潜在危险的 Request.Form 值   这种问题是因为你提交的Form中有HTML字符串,例如你在TextBox中输入了html标签,或者在页面中使用了HtmlEditor组件等,解决办 ...

  5. java中的异常区分

    在上图中,粉红色的部分为受检查的异常,其必须被try{}catch语句块所捕获,或者在方法中向外抛出异常 绿色的异常为运行时异常,需要程序员自行分辨是否要解决异常或者抛出异常,例空指针数组下标越界等等 ...

  6. Hive 创建表

    创建表的三种方式: 方式一:新建表结构 CREATE TABLE emp( empno int, ename string ) ROW FORMAT DELIMITED FIELDS TERMINAT ...

  7. eclipse取消空格、等号、分号自动录入

    默认eclipse中按空格.等号.分号等键时,会将提示框中的文字输入到编辑内容中,但是很多时候我们并不希望录入,可如下设置. 1.打开 Eclipse -> Window -> Perfe ...

  8. ngx_lua 模块

    ngx_lua模块的原理: 1.每个worker(工作进程)创建一个Lua VM,worker内所有协程共享VM:2.将Nginx I/O原语封装后注入 Lua VM,允许Lua代码直接访问:3.每个 ...

  9. 案例学Python--案例四：Django实现一个网站的雏形（2）

    续上篇,用Django创建了一个Web,我们肯定想展示自己的页面,简单点,我们想看到自己的HelloWorld.此处要从项目的配置说起,方法和路径配对了,展现页面分分钟的事情. 先上效果图吧:     ...

  10. 个人博客地址: furur.xyz

    趁着Hexo的热度,最近就买了域名,在GitHub Pages上搭了个人博客.也不是说博客园不好吧,毕竟在博客园三年多,也学到了不少东西,唯一要吐槽的,估计也就是后台管理不方便,markdown无即时 ...