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)


相关推荐

  • 达梦数据库同步部署方案「建议收藏」

    达梦数据库同步部署方案「建议收藏」达梦数据复制(DATAREPLICATION)是一个分担系统访问压力、加快异地访问响应速度、提高数据可靠性的解决方案。将一个服务器实例上的数据变更复制到另外的服务器实例。可以用于解决大、中型应用中出现的因来自不同地域、不同部门、不同类型的数据访问请求导致数据库服务器超负荷运行、网络阻塞、远程用户的数据响应迟缓的问题。

    2022年10月15日
  • 004 JVM调优工具_arthas(阿尔萨斯)

    004 JVM调优工具_arthas(阿尔萨斯)https://alibaba.github.io/arthas/Arthas是Alibaba开源的Java诊断工具,其安装应用非常简单,功能非常强大;1.安装:推荐使用arthas-boot下载arthas-boot.jar:curl-Ohttps://alibaba.github.io/arthas/arthas-boot.jarjava-jararthas-bo…

  • nested exception is java.lang.StackOverflowError解析

    背景介绍:项目是微服务的,使用docker容器,使用jenkins部署。测试环境有个公共服务一直以来都能正常发布,突然有一天不行了,经常发布失败,然后多发布几次就好了。报错如下:是栈溢出了,一般

  • CAN总线学习笔记(3)- CAN协议错误帧

    CAN总线学习笔记(3)- CAN协议错误帧依照瑞萨公司的《CAN入门书》的组织思路来学习CAN通信的相关知识,并结合网上相关资料以及学习过程中的领悟整理成笔记。好记性不如烂笔头,加油!1错误帧的帧结构在发送和接收报文时,总线上的节点如果检测出了错误,那么该节点就会发送错误帧,通知总线上的节点,自己出错了。错误帧由错误标志和错误界定符两个部分组成。主动错误标志:6个连续的显性位;被动错误标志:6个连续的隐性位;…

  • android 资源图片加密

    android 资源图片加密android中有些重要的图片资源可以选择加密,因为不管是加固还是混淆,资源文件的图片始终能被看到,加密图片步骤1. 创建java项目安作为加密图片的工具,新建一个project,在main方法里调用加密方法,加密方法里传一个路劲,这个路劲是电脑里图片的路劲publicstaticvoidmain(String[]args){//调用加密方法KMD

  • 大数据与云计算和物联网之间的关系是什么_大数据信息主要安全问题不包括

    大数据与云计算和物联网之间的关系是什么_大数据信息主要安全问题不包括大数据时代的到来,是全球知名咨询公司麦肯锡最早提出的,麦肯锡称:“数据,已经渗透到当今每一个行业和业务职能领域,成为重要的生产因素。人们对于海量数据的挖掘和运用,预示着新一波生产率增长和消费者盈余浪潮的到来。”《互联网进化论》一书中提出“互联网的未来功能和结构将于人类大脑高度相似,也将具备互联网虚拟感觉,虚拟运动,虚拟中枢,虚拟记忆神经系统”,并绘制…

发表回复

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

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