Jquery选中的radio行变色

Jquery选中的radio行变色

<!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">  
<style>  
/*定义了三个样式*/  
/*.once{  
    background-color:#0FC;  
     }  
.after{  
background-color:#F00;    
    } */     
.selected1{  
    background-color:#33C;  
       }  
  
</style>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<script language="javascript" type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script>  
<script language="javascript" type="text/javascript"  >  
//使用jquery绑定事件  
$(document).ready(function (){  
    //各行变色  
         $("tr:even").addClass("once");  
         $("tr:odd").addClass("after");  
         //根据type获取了所有的radio框,并且给radio添加事件  
         $("input[type='radio']").click(function (){  
         //如果radio被选中则给选中的改行增加样式  
         $("input[type='radio']:checked").parents("tr").addClass("selected1");   
         //如果没有被选中则移除selected样式  
          //alert($("input:not(input:checked)").length);  
           $("input:not(:checked)").parents("tr").removeClass("selected1");   
       
          });  
     });  
/*注意:表格中的name名称一定要相同*/   
</script>  
</head>  
  
<body>  
<table width="600" border="1">  
  <tr>  
    <td><input type="radio" name="box" /></td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
   <td><input type="radio" name="box" /></td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
   <td><input type="radio" name="box" /></td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
   <td><input type="radio" name="box" /></td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
   <td><input type="radio" name="box" /></td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
   <td><input type="radio" name="box" /></td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
   <td><input type="radio" name="box" /></td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
   <td><input type="radio" name="box" /></td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
</table>  
  
</body>  
</html>  

 

 

无标题文档

     
     
     
     
     
     
     
     

转载于:https://www.cnblogs.com/wifi/articles/3012730.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/110168.html原文链接:https://javaforall.net

(0)
上一篇 2021年8月23日 上午10:00
下一篇 2021年8月23日 上午10:00


相关推荐

  • FindWindowEx 遍历所有窗口

    FindWindowEx 遍历所有窗口 FindWindowEx 唯一麻烦是第2个参数的指定.Explore下窗口是Z序的 ,实际上就是根据第一个参数和第2个参数来找第2个参数后的一个窗口:HWNDchild=0;child=FindWindowEx (NULL,child,NULL,NULL);这样,child就是一个Explore,然后,通过循环能够找到c…

    2022年6月1日
    39
  • navicat11.0.18激活码【2021免费激活】

    (navicat11.0.18激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html1STL5S9V8F-eyJsaWNlbnNlSW…

    2022年3月27日
    391
  • 初探无水印信息图片加密技术「建议收藏」

    初探无水印信息图片加密技术「建议收藏」原文链接 https://yq.aliyun.com/articles/72267背景随着手机app越来越多,对于App信息安全面临的挑战越来越大,像接口传递的验证信息这些相对保密的信息如果直接放在app中明文,那么毫无疑问,很容易就被激活成功教程出来,想干嘛就干嘛。因为为了对部分本地信息加密,相处过无数的办法,本次讨论的重点,无水印信息图片加密。原理无水印信息图片加密,基

    2022年6月21日
    34
  • blender2.9教程_赖世雄入门篇

    blender2.9教程_赖世雄入门篇Blender2.8基础(一)基础操作与常用快捷键▶Ctrl+N:创建新工程一、视图操作1、放大视图▶视图最大化显示:Ctrl+空格(左键点击视图任意地方可以选择视图,然后按Ctrl+空格可以最大化显示视图。)▶切换全屏模式:Ctrl+Alt+空格2、切换视图▶切换视图:Alt(按住不放)+按住中键上下或左右移动鼠标(每切换一次视图就必须重新按一下中键并移动鼠标)▶……

    2022年8月10日
    10
  • cad图例大全_Dote图层

    cad图例大全_Dote图层之前总是想当然的认为,将N个纹理打包成一个图集,那么这个图集只会产生一个DrawCall,如果不打就产生N个DrawCall,后来才发现这并不是决定DrawCall的唯一因素,它还和层级关系有关······这里就会提到渲染的顺序问题,在渲染时默认会按照深度去渲染,也就是会先渲染离摄像机远的物体,后渲染离摄像机近的物体。例如你按顺序渲染三个物体A、B、C,A和C使用相同的材质1,B使用材质2,这…

    2025年12月11日
    5
  • Vim查找替换

    Vim查找替换1、查找/pattern:向下查找pattern匹配字符串?pattern:向上查找pattern匹配字符串使用了查找命令之后,使用如下两个键快速查找:n:按照同一方向继续查找N:按照反方向查找除此之外,pattern还可以使用一些特殊字符,包括(/、^、$、*、.),其中前三个这两个是vi与vim通用的,“/”为转义字符。在查找模式中加入\c表示大小写不敏感查找,\C表示大小写敏感查找。例如:/foo\c将会查找所有的”foo”,“FOO”,”Foo”等字符串1:/^abc

    2022年6月15日
    170

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号