jQuery模仿单选按钮选中效果

网络编程 JavaScript javascript类库 jquery 分类:[default] 更新日期: 2015-10-14
单选按钮以及复选按钮的使用情况还是蛮多的,多选按钮使用toggleClass方法就可以实现,下面小编给大家介绍单选按钮的实现,感兴趣的朋友一起看下吧

刚开始学jquery,工作中有些css表单中的按钮美化很麻烦,所以想着用jquery来替换,复选框的jquery很容易,就是简单的样式切换效果,用toggleClass()方法即可。

而单选框之前一直不知道怎么做,因为在单选框中选中一个,其他的都必须移除掉样式,如果2个单选框在同级中则用siblings()则可直接找到其他单选框移除掉样式即可。鉴于自己工作是循环列表模式,每个<li>里面都带有一个单选框,未发现jquery中parent()这个好用的方法,以致于纠结了半天。

css如下:

<!DOCTYPE html>
<html class="area">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>设置-收货地址</title>
<link  href="../css/app.css">
<script src="../js/jquery.js"></script>
//<![CDATA[
<script>
$(function(){
//改变样式同时改变右边的文字
$("span.zdy-icon-radio").click(function(){
$(this).addClass("active").text("默认地址")
.parent().parent().parent().siblings().find("span.zdy-icon-radio").removeClass("active").text("设为默认");
});
})
//]]>
</script>
<style>
.bjsc-lf span{float: left;}
.bjsc-lf > span:last-child{line-height: 2.1rem;}
.zdy-icon-radio{display:block;width: 30%rem; height: 2.15rem;margin-right: 1rem;padding-left: 3.15rem;line-height: 2.15rem;
font-family:"微软雅黑";float: left;background:url(../img/checkRight.jpg) no-repeat;background-size: 2.1rem 2.1rem;;}
.bjsc-rt{float: right;}
.zdy-icon-radio.active{background: url(../img/checked.png) no-repeat;background-size: 2.1rem 2.1rem;color: #f08417;}
</style>
</head>
<body>
<div class="xp-content02">
<div class="tt02">
编辑地址
</div>
<div class="bianji-dizhi">
<div class="tt09">
<span>15354656536</span>
<span>苏定芳</span>
</div> 
<div class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</div>
<div class="bianji-shanchu mui-clearfix">
<div class="bjsc-lf mui-clearfix">
<span class="zdy-icon-radio active">默认地址</span>
</div>
<div class="bjsc-rt">
<span class="mui-icon mui-icon-compose"></span>编辑
<span class="mui-icon mui-icon-trash"></span>删除
</div>
</div>
</div>
<div class="greybg02"></div>
<div class="bianji-dizhi">
<div class="tt09">
<span>15354656536</span>
<span>苏定芳</span>
</div> 
<div class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</div>
<div class="bianji-shanchu mui-clearfix">
<div class="bjsc-lf">
<span class="zdy-icon-radio">设为默认</span> 
</div>
<div class="bjsc-rt">
<span class="mui-icon mui-icon-compose"></span>编辑
<span class="mui-icon mui-icon-trash"></span>删除
</div>
</div>
</div>
<div class="greybg02"></div>
<div class="bianji-dizhi">
<div class="tt09">
<span>15354656536</span>
<span>苏定芳</span>
</div> 
<div class="your-adress02">
南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
</div>
<div class="bianji-shanchu mui-clearfix">
<div class="bjsc-lf">
<span class="zdy-icon-radio">设为默认</span> 
</div>
<div class="bjsc-rt">
<span class="mui-icon mui-icon-compose"></span>编辑
<span class="mui-icon mui-icon-trash"></span>删除
</div>
</div>
</div>
<div class="greybg02"></div>
</body>
</html>

效果如下:无论如何都只能一个添加样式,右边文字也随点击改变。

jQuery模仿单选按钮选中效果

以上所述是小编给大家介绍的jQuery模仿单选按钮选中效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • jQuery如何用正则表达式验证手机号、身份证号、中文名称
    这篇文章主要介绍了jQuery如何用正则表达式验证手机号.身份证号.中文名称 的相关资料,需要的朋友可以参考下数字判断方法:isNaN()函数 test()方法 判断字符串中是否匹配到正则表达式内容,返回的是boolean值 ( true / false ) // 验证中文名称 function isChinaName(name) { var pattern ...
  • Jquery和BigFileUpload实现大文件上传及进度条显示
    Jquery和BigFileUpload实现大文件上传及进度条显示
    这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面 ...
  • CSS3实现动态翻牌效果仿百度贴吧3D翻牌一次动画特效
    CSS3实现动态翻牌效果仿百度贴吧3D翻牌一次动画特效
    本文主要分享一个利用CSS3新特性transform,实现3D翻牌的特效,有需要的小伙伴可以参考下.今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的.呵呵,超酷啊. 一.HTML代码: 因为是CSS3实现,所以大家可以看到没有任何的JS代码.ul为一组图片,每个li中有个a(因为我们希望可以跳转),a中包含两个div ...
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
    这篇文章主要介绍了利用ASP.NET和MVC+Bootstrap搭建个人博客之praise.js点赞特效插件二的相关资料,需要的朋友可以参考下在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一).接下来给大家介绍如果做个点赞插件,一起通过本文学习吧! 1. 为啥要做这个点赞插件?    praise.js是一款小 ...
  • 利用ASP.NETMVC和Bootstrap快速搭建响应式个人博客站(一)
    利用ASP.NETMVC和Bootstrap快速搭建响应式个人博客站(一)
    这篇文章主要介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站一的相关资料,需要的朋友可以参考下1.0 为什么要做这个博客站? 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效. ...
  • python正则表达式学习小结
    这篇文章主要介绍了python 正则表达式学习小结的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下 在Python中实现正则的方式是通过re(regular expression的缩写)模块来实现的,你可以调用re模块的各种方法来实现不同的功能,下面我们就来说下,在Python中通过re模块可以调用那些方法,以及这些方法的作用都是什么:还有就是正则 ...
猜你喜欢