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


相关推荐

  • redis命令

    redis命令redis命令

    2022年4月24日
  • MySQL主从复制数据同步,常见问题总结

    MySQL主从复制数据同步,常见问题总结

    2022年2月19日
  • VIM中的保存和退出、VIM退出命令、如何退出vim编辑、VIM命令大全

    VIM中的保存和退出、VIM退出命令、如何退出vim编辑、VIM命令大全退出命令是,按ESC键跳到命令模式,然后输入q(不保存)或者wq(保存)退出。其他退出命令::w保存文件但不退出vi:wfile将修改另外保存到file中,不退出vi:w!强制保存,不推出vi:wq保存文件并退出vi:wq!强制保存文件,并退出vi:q不保存文件,退出vi:q!不保存文件,强制退出vi:e!放弃所有修改,从上次保存文件开始再编辑

    2022年6月12日
  • win10关闭445端口方法_服务器关闭445端口

    win10关闭445端口方法_服务器关闭445端口445端口是一种TCP端口,有了它我们可以在局域网中轻松访问各种共享文件夹或共享打印机,但也正是因为有了它,黑客们才有了可乘之机,他们能通过该端口偷偷共享你的硬盘,甚至会在悄无声息中将你的硬盘格式化掉。今天小编将为大家分享Win11关闭445端口的方法,一起来看看吧!更多重装系统教程尽在小白系统重装官网  1、首先,按Win+S组合键,或点击底部任务栏上的搜索图标,打开的Windows搜索窗口,顶部输入Windows防火墙,然后点击系统给出的最佳匹配WindowsDefender防

    2022年10月7日
  • fastcgi java_fastcgi是什么

    fastcgi java_fastcgi是什么1.概述FastCGI全称快速通用网关接口(FastCommonGatewayInterface)。FastCGI实际上是增加了一些扩展功能的CGI、是CGI的改进,描述了客户端和Web服务器程序之间传输数据的一种标准。FastCGI像是一个常驻(long-live)型的CGI,FastCGI致力于减少Web服务器与CGI程序之间进行互动的开销,从而使Web服务器可以同时处理更多的…

    2022年7月27日
  • 网站备案是域名备案还是服务器备案(域名备案一定要服务器吗)

    网站域名服务器怎么备案内容精选换一换WordPress简称WP,最初是一款博客系统,后逐步演化成一款免费的CMS(内容管理系统/建站系统)。本文档指导用户使用华为云市场镜像“Wordpress官方正式版”部署WordPress博客系统。已购买虚拟私有云和弹性公网IP。如果规划为网站配置域名,需已经购买好相应的域名。弹性云服务器所在安全组添加了如表1所示的安全组规则,具体步骤空壳网站指备案主体已在…

    2022年4月10日

发表回复

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

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