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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • HibernateTemplate的使用方法

    HibernateTemplate的使用方法HibernateTemplate的使用方法

  • Java面向对象三大特性(封装、继承、多态)

    Java面向对象三大特性(封装、继承、多态)文章目录前言一、封装1.封装的概念2.private实现封装3.getter和setter方法4.封装的好处二、继承1.extends实现继承2.super关键字三,多态总结前言OOP语言:也就是面向对象编程。面向对象的语言有三大特性:封装、继承、多态。三大特性是面向对象编程的核心。下面就来介绍一下面向对象的三大特性。如果想了解面向对象可以看一下这一篇博客类和对象一、封装1.封装的概念在我们写代码的时候经常会涉及两种角色:类的实现者和类的调用者封装的本质就是让类的调用者不必太多的.

  • 讲真,MySQL索引优化看这篇文章就够了

    讲真,MySQL索引优化看这篇文章就够了

  • sql server 2008修改端口_sqlserver 端口

    sql server 2008修改端口_sqlserver 端口打开开始菜单,找到sqlserver的配置管理器,点击打开按下图配置右边窗口三项:按下图配置右边三项:按下图配置右边三项:点击下图左边的SQLServer网络配置/MSSQLSERVER的协议,然后在双击右边窗口的TCP/IP项,打开tcp/ip配置窗口。切换到ip地址选项卡,凡是tcp端口的,均把原来的默认端口1433改为1772。然后保存。在这个过程中,有几项的修改会有这样的提示:点击确定…

    2022年10月20日
  • Windows平台及服务器部署安装多个Tomcat服务(详细版)

    Windows平台及服务器部署安装多个Tomcat服务(详细版)Tomcat安装有两种方式,一是下载安装版,这个也是在部署多个Tomcat服务的时候最方便的,也是最快的,二是就是下载免安装版,解压即可,单个Tomcat免安装版是最快的。一、下载Tomcat,我用的是Tomcat8.5到Tomcat官网http://tomcat.apache.org/,根据需求下载所需要的版本我下载的是Tomcat8.5二、安装二.一安装版下载…

  • c++11新特性之宽窄字符转换

    C++11增加了unicode字面量的支持,可以通过L来定义宽字符:str::wstringstr=L"中国人";将宽字符转换为窄字符串需要用到codecvt库中的std:

    2021年12月28日

发表回复

您的电子邮箱地址不会被公开。

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