jQuery模仿单选按钮选中效果


Posted in Javascript onJune 24, 2016

刚开始学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 rel="stylesheet" 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模仿单选按钮选中效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
基于axios 的responseType类型的设置方法
Oct 29 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 #Javascript
jQuery如何获取动态添加的元素
Jun 24 #Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 #Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 #Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 #Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 #Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 #Javascript
You might like
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
php抽象类用法实例分析
2015/07/07 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python编写登陆接口的方法
2017/07/10 Python
python中的print()输出
2019/04/12 Python
原生python实现knn分类算法
2019/10/24 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
python一些性能分析的技巧
2020/08/30 Python
邮政员工辞职信
2014/01/16 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
户外婚礼策划方案
2014/02/08 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
Tomcat用户管理的优化配置详解
2022/03/31 Servers