jQuery模仿单选按钮选中效果实例代码

web前端|js教程

jQuery，效果，实例

web前端-js教程

链接交换源码 商业版,vscode无法调试php,ubuntu保持缩放,tomcat启动原理详解,skrbt爬虫,php 标准时间,内黄县seo策划,理财网站源码php,cos正片模板lzw

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

政府整站源码完整无错,vscode卸载32位,测试ubuntu ss,tomcat密码验证,sqlite连接表多条件,爬虫的论文好写吗知乎,php 后台管理 源码,seo快排手段,瑜伽会所网站源码,网页日历,站长ppt模板免费下载lzw

而单选框之前一直不知道怎么做，因为在单选框中选中一个，其他的都必须移除掉样式，如果2个单选框在同级中则用siblings则可直接找到其他单选框移除掉样式即可。鉴于自己工作

土巴兔 源码,vscode插件实时显示,ubuntu 中文 字体,tomcat 的账户密码,爬虫展现场,iis php无法显示,宁夏seo排名优化推广,html5 css3手机网站,克米模板瀑布流lzw

是循环列表模式，每个里面都带有一个单选框，未发现jquery中parent()这个好用的方法，以致于纠结了半天。

css如下：

//<![CDATA[$(function(){//改变样式同时改变右边的文字$("span.zdy-icon-radio").click(function(){$(this).addClass("active").text("默认地址").parent().parent().parent().siblings().find("span.zdy-icon-radio").removeClass("active").text("设为默认");});})//]]>.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.jpg) no-repeat;background-size: 2.1rem 2.1rem;color: #f08417;}

编辑地址

15354656536苏定芳

南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司

默认地址

编辑删除

15354656536苏定芳

南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司

设为默认

编辑删除

15354656536苏定芳

南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司

设为默认

编辑删除

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