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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • lua中的weak table及内存回收collectgarbage

    弱表(weaktable)是一个很有意思的东西,像C++/Java等语言是没有的。弱表的定义是:Aweaktableisatablewhoseelementsareweakreferences,元素为弱引用的表就叫弱表。有弱引用那么也就有强引用,有引用那么也就有非引用。我们先要厘这些基本概念:变量、值、类型、对象。(1)变量与值:Lua是一个dynamicallyty

    2022年4月7日
    97
  • Python之用虚拟环境隔离项目,并重建依赖关系

    下面将以安装django和mysqlclient介绍如何用虚拟环境隔离项目,并重建依赖关系。操作系统:windows10;python版本:python3.71.安装python虚拟环境(1)

    2021年12月30日
    42
  • 蒙特卡洛算法案例_蒙特卡洛原理

    蒙特卡洛算法案例_蒙特卡洛原理从今天开始要研究SamplingMethods,主要是MCMC算法。本文是开篇文章,先来了解蒙特卡洛算法。Contents1.蒙特卡洛介绍2.蒙特卡洛的应用3.蒙特卡洛积分1.蒙特

    2022年8月1日
    10
  • docker下载安装教程_docker镜像存储位置

    docker下载安装教程_docker镜像存储位置前言Docker提供轻量的虚拟化,你能够从Docker获得一个额外抽象层,你能够在单台机器上运行多个Docker微容器,而每个微容器里都有一个微服务或独立应用,例如你可以将Tomcat运行在一个D

    2022年7月29日
    6
  • 机房搬迁遇到的问题[通俗易懂]

    机房搬迁遇到的问题[通俗易懂]春节之前,公司接到了项目,机房搬迁,一般的机房搬迁也无所谓,但是这次是工商行政管理局的机房搬迁,从9楼搬到一楼,现把遇到的问题记录如下。总共有3套系统运行在机房,重要的是全省的工商系统,硬件是2台小型机IBM570和一套磁盘阵列存储数据,这套系统已经运行10年之久,之前一直没有关机过,所以我们很是谨慎处理这套系统,在搬迁之前已经重启过机器,因为按照以往的经验计算机长时间的运行,重启后就就有可

    2025年7月23日
    4
  • kali apk免杀_kali攻击windows

    kali apk免杀_kali攻击windows首先,介绍一下VeilEvasion,VeilEvasion是linux的一款免杀工具,是一个用Python编写的免杀框架,用来生成MSF的Payload,能绕过常见的杀毒软件,它可以将任意脚本或一段Shellcode转换成Windows可执行文件,从而逃避常见防病毒产品的检测。关于MSF,它就是一个漏洞框架(全称:TheMetasploitFramework),嗯,免费,通过这个框架,我们可以很容易的对于软件的漏洞进行攻击。它本身带有几千个漏洞攻击工具。……

    2022年8月20日
    7

发表回复

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

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