jQuery模仿單選按鈕選中效果

2019-11-20 09:36:41

字體：大中小

來源：轉載

供稿：網友

剛開始學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>

效果如下：無論如何都只能一個添加樣式,右邊文字也隨點擊改變。