jQuery模仿单选按钮选中效果_Javascript教程-查字典教程网

jQuery模仿单选按钮选中效果

摘要：刚开始学jquery，工作中有些css表单中的按钮美化很麻烦，所以想着用jquery来替换，复选框的jquery很容易，就是简单的样式切换效...

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

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

css如下：

<!DOCTYPE html> <html> <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> <div> 编辑地址 </div> <div> <div> <span>15354656536</span> <span>苏定芳</span> </div> <div> 南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司 </div> <div> <div> <span>默认地址</span> </div> <div> <span></span>编辑 <span></span>删除 </div> </div> </div> <div></div> <div> <div> <span>15354656536</span> <span>苏定芳</span> </div> <div> 南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司 </div> <div> <div> <span>设为默认</span> </div> <div> <span></span>编辑 <span></span>删除 </div> </div> </div> <div></div> <div> <div> <span>15354656536</span> <span>苏定芳</span> </div> <div> 南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司 </div> <div> <div> <span>设为默认</span> </div> <div> <span></span>编辑 <span></span>删除 </div> </div> </div> <div></div> </body> </html>

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

jQuery模仿单选按钮选中效果1