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


相关推荐

  • 关于记忆化搜索

    关于记忆化搜索转载自:http://blog.csdn.net/urecvbnkuhbh_54245df/article/details/5847876记忆化搜索: 算法上依然是搜索的流程,但是搜索到的一些解用动态规划的那种思想和模式作一些保存。一般说来,动态规划总要遍历所有的状态,而搜索可以排除一些无效状态。更重要的是搜索还可以剪枝,可能剪去大量不必要的状态,因此在空间开销上往往比动

    2022年7月26日
    7
  • 18.网页尺寸scrollHeight

    18.网页尺寸scrollHeight

    2021年9月4日
    48
  • 方程自己解(1)——物理信息神经网络(PINN)

    方程自己解(1)——物理信息神经网络(PINN)文章目录前言(一)物理神经网络(PINN)解读1.1PINN基本背景1.2PINN算法描述前言  最近正在看利用“深度学习”(大概吧,其实只是利用了neuralnetwork的自动微分特性(AD)),在看一些文章的同时,将文章中提到的开源代码用起来和复现一些基本方程求解能够加快我学习的进度,这里将持续贴出一些方程和代码的求解过程。当然非常希望同学和朋友们可以给我指出错误,最后如果能够坚持下去,这个系列的工作会分享到github,同时如果对各个开源程序有所帮助那就更好了!  由于会参考到很多文章

    2022年10月23日
    0
  • Matlab绘图方法整理(超完整版)[通俗易懂]

    Matlab绘图方法整理(超完整版)[通俗易懂]超详细版Matlab绘图方法整理,1万字文章让你流畅掌握Matlab作图方法,保证你能完全掌握常用作图手段,谁又不想做一幅详细、美丽的图呢?

    2022年6月30日
    24
  • STM32+MFRC522完成IC卡号读取、密码修改、数据读写

    一、环境介绍MCU:STM32F103ZET6开发软件:Keil5非接触式读写卡模块:MFRC522完整工程源码下载:https://download.csdn.net/download/xiaolong1126626497/18905806二、功能介绍使用MFRC522模块完成对IC卡卡号读取、卡类型区分、IC卡扇区密码修改、扇区数据读写等功能;底层采用SPI模拟时序,可以很方便的移植到其他设备,完成项目开发。现在很多嵌入式方向的毕业设计经常使用到该模块,比如:校园…

    2022年4月8日
    61

发表回复

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

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