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


相关推荐

  • Win10任务管理器中不显示GPU显卡的解决方法[通俗易懂]

    Win10任务管理器中不显示GPU显卡的解决方法[通俗易懂]Windows10任务管理器中不显示GPU的解决方法、Windows10任务管理器中不显示显卡的的解决方法、同样适用于Windows11。

    2022年5月7日
    975
  • jupyternotebook和pycharm的区别_jupyternotebook和pycharm的区别

    jupyternotebook和pycharm的区别_jupyternotebook和pycharm的区别在PyCharm环境中使用JupyterNotebook

    2022年8月26日
    3
  • pytest fixtures_premier fixture

    pytest fixtures_premier fixturefixture的优势Pytest的fixture相对于传统的xUnit的setup/teardown函数做了显著的改进:命名方式灵活,不局限于setup和teardown这几个命名conf

    2022年7月30日
    6
  • Frp内网穿透

    Frp内网穿透Frp内网穿透​ 内网穿透从本质上来讲也是端口映射,两者都是将内网地址映射到公网可访问的地址,而区别是端口映射直接在路由器中配置即可,而内网穿透配置的端口映射则需要客户端和服务端进行绑定后实现,相当于客户端和服务端之间建立了一条隧道,然后访问服务端的请求会通过隧道转发给内网主机,该情况多用于没有公网IP的情况下使用;​ frp是一个高性能的反向代理应用,可以轻松地进行内网穿透,对外网提供服务,支持tcp,udp,http,https等协议类型,可以将内网服务以安全、便捷的方式通过具有公网

    2022年9月13日
    1
  • portraiture 3 mac(最强ps人像美化磨皮滤镜)内附安装教程

    portraiture 3 mac(最强ps人像美化磨皮滤镜)内附安装教程imagenomicportraituremac是一款非常强大的ps人像美化磨皮滤镜,可以更好的辅佐我们的ps进行人像滤镜美化处理。portraituremac激活成功教程版能够智能的对图像中的肤色、毛发以及眉毛等部位进行滤镜抛光处理,细节处理,以减少瑕疵。portraituremac激活成功教程版基本上是人人都能用得上的ps辅助工具,有了它处理人像效果更加显著。小编现为您带来portraiture3滤镜下载,需要的小伙伴快来下载吧!下载地址:https://mac.orsoon.com/Mac/167.

    2022年7月22日
    11
  • 快速mysql导入sql文件_mysql肿么快速从sql文件导入数据库

    快速mysql导入sql文件_mysql肿么快速从sql文件导入数据库我的个人实践是:phpmyadmin导出utf-8的insert模式的abc.sqlftpabc.sql到服务器ssh到服务器mysql-uabc-puseKKK(数据库名,如果没有就createdatabaseKKK)setnames’utf8’sourceabc.sql注意:我看到setcharactersetutf8;的说法,那样不行,中…

    2022年10月2日
    2

发表回复

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

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