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


相关推荐

  • MySQL查看实时执行的SQL语句

    MySQL查看实时执行的SQL语句

    2022年2月17日
    43
  • 计算机专业英语词汇大全

    A(Active-matrix)主动矩阵(Adaptercards)适配卡(Advancedapplication)高级应用(Analyticalgraph)分析图表(Analyze)分析(Animations)动画(Applicationsoftware)应用软件(Arithmeticoperations)算术运算(Audio-outputdevice)音频输出…

    2022年4月4日
    73
  • JDBC的概述「建议收藏」

    JDBC的概述「建议收藏」————————————————–JDBC的概述————————————————————1    JDBC概述1 什么是JDBC  JDBC(JavaDataBaseConnectivity)就是Java数据库连接,说白了就是用Java语言来操作数据库…

    2022年6月23日
    20
  • 一个Scrapy爬虫实例

    一个Scrapy爬虫实例目录Scrapy是啥Scrapy的安装实例:爬取美剧天堂new100:(1)创建工程:(2) 创建爬虫程序(3) 编辑爬虫(4)设置item模板:(5) 设置配置文件(6)设置数据处理脚本:(7)运行爬虫Scrapy是啥scrapy是一个使用python编写的开源网络爬虫框架。这里的框架实际上就是应用程序的骨架,是一个半成品,框架能够保证程序结构风格统一。Scrapy的安装pipinstallScrapy。但在此之前要先安装几个包:在cmd中运行以下语句:(1) pipinstallwh

    2022年6月26日
    24
  • new construction options_actionsheet

    new construction options_actionsheethttp://www.blogjava.net/lucky/archive/2010/01/19/33380.html 前言1.配置1.1.先决条件1.2.安装1.3.导出过滤器(可选)1.4.安装测试2.概述2.1.引言3.TableTag3.1.引言3.2.显示图片3.3….

    2022年8月20日
    4
  • axure快速原型设计工具

    axure快速原型设计工具

    2022年2月22日
    52

发表回复

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

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