Jquery选中的radio行变色

最新推荐文章于 2020-12-30 11:05:50 发布
最新推荐文章于 2020-12-30 11:05:50 发布
阅读量226 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/wifi/articles/3012730.html
版权 
<!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

weixin_34288121
关注
jquery的radio选中加背景颜色
zwy15841139493的博客
05-29 1258
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { list-style-type: none; font-size: xx-large; width: 320px; } .highlight { background-color: orange; color: white; } </style> <script src="jquery
radio文本选中行变色
u012668297的专栏
06-17 523
无标题文档 function change() {    var str="";    var str1=document.getElementsByName("aihao");    //获取name为“aihao”的复选框，返回的是 一个 数组    for(var i=0; i    {        if(str1[i].checked)    {    
Jquery 实现Radion的变色功能
qhx556的专栏
04-22 488
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">                           $(function () {                $('#Button1').click(function () {
radio选中当前div变色，其余不变
04-15 2992
$('.Radio').off('click').on('click',function(){ var titleColor = $(this).next();    //取到当前div  $(".Radio").change(function(){  titleColor.css("background-color","#CCC");//当前颜色            $(".Radio
radio选中状态对应文字改变颜色
sinat_23668639的博客
12-01 8192
效果： html: 本人申请 代替他人申请css: .radio { width: 18px; height: 18px; border: 2px solid #649723; margin-top: 20px; } .radio-font { font-size: 18px; margin-right: 25px; color:#767676; margin-top
jquery监听radio变化_jquery 监听radio选中，取值
weixin_36238568的博客
12-23 4735
$(document).ready(function(){ $("input[name=discount]").each(function(){ $(this).click(function(){ var discount = $(this).val(); if(discount=="0"){ $(".discount").css("display","none"); } if(discount=...
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
10-21
这段代码在鼠标悬浮在表格行上时添加 "highlight" 类，离开时移除，实现滑过变色效果。"highlight" 类同样需要在 CSS 中定义，比如： ```css .highlight { background-color: #ffffcc; /* 或其他颜色 */ } ``` ...
更改radio圆点颜色
Summer_JK的博客
12-30 3536
更改radio圆点颜色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta
Jquery操作单选框选中状态
热门推荐
jiegeng2233的博客
11-08 3万+
前端开发中经常使用到单选框(radio)与多选框(checkbox)组件，需要对组件的状态进行设置和读取，下面看一段网上流行的操作代码： class="cb-container"> input type="radio" class="cb-radio" id="r1" name="rd" value="left"/> input type="radio" class="cb-radio cb-g
css3更改radio的颜色和样式
jinxi1112的博客
09-29 3万+
<label for="radio"> 几个关键点： （1）设置input的opacity为0。 （2）在input后面添加一个label，for属性绑定input的id。 （3）在label中加入两个标签，内部标签负责checked样式，外部负责未选中样式边框。然后在css中修改想要的样式就可以了，样式类似这个样纸。
table（单击行，把当行的单选按钮(radio)设为选中状态，并应用当前样式）
魂-淡
11-01 8877
jquery小应用
修改radio的选中颜色为红色
小哈力----一个小前端工程师
11-29 9310
修改radio选中颜色为红色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>修改radio的选中颜色为红色</title> <meta name="description" content=
Jquery之table中根据行选中，进行背景变色和radio选中
weixin_34138056的博客
12-10 269
实现功能：点击列表中的某一行，然后当前行会变成其他颜色，并且其中的radio会被选中。<%@pagelanguage="java"contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <% Stringpath=request.getContextPath(); S...
jquery实现点击table行变色且选中该行的radio
cgs的博客
06-05 1840
function trSelect() { $("tbody tr").click(function () { $(this).prop("style", "background-color:#ececec").siblings().prop("style", "background-color:#ffffff"); $("tbody
改变radio默认选中颜色
yyjourney的博客
05-31 3万+
css简单改变radio默认选中样式
JQ 选中单选按钮
大柱子
03-13 2398
if (data.Sex=="1") { $('input:radio').eq(0).attr('checked', 'true') } else { $('input:radio').eq(1).attr('checked', 'true') ...
jQuery实现表格隔行变色与高亮选中行效果
"jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例" 本文主要介绍了如何使用jQuery库来实现HTML表格的隔行变色以及选中行高亮显示的功能。在网页设计中，这样的效果能够提升用户界面的可读性和用户体验，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值