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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
js canvas实现擦除动画
Jul 16 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
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文件缓存类汇总
2014/11/21 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 获取url中的参数列表实例
2018/12/18 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python中if及if-else如何使用
2020/06/02 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
会计专业导师推荐信
2014/03/08 职场文书
工作犯错保证书
2015/05/11 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android