jQuery模仿單選按鈕選中效果
剛開(kāi)始學(xué)jquery,工作中有些css表單中的按鈕美化很麻煩,所以想著用jquery來(lái)替換,復(fù)選框的jquery很容易,就是簡(jiǎn)單的樣式切換效果,用toggleClass()方法即可。
而單選框之前一直不知道怎么做,因?yàn)樵趩芜x框中選中一個(gè),其他的都必須移除掉樣式,如果2個(gè)單選框在同級(jí)中則用siblings()則可直接找到其他單選框移除掉樣式即可。鑒于自己工作是循環(huán)列表模式,每個(gè)<li>里面都帶有一個(gè)單選框,未發(fā)現(xiàn)jquery中parent()這個(gè)好用的方法,以致于糾結(jié)了半天。
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>設(shè)置-收貨地址</title> <link rel="stylesheet" href="../css/app.css"> <script src="../js/jquery.js"></script> //<![CDATA[ <script> $(function(){ //改變樣式同時(shí)改變右邊的文字 $("span.zdy-icon-radio").click(function(){ $(this).addClass("active").text("默認(rèn)地址") .parent().parent().parent().siblings().find("span.zdy-icon-radio").removeClass("active").text("設(shè)為默認(rèn)"); }); }) //]]> </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號(hào)江西師范科技大學(xué)科技園訊升信息技術(shù)有限公司 </div> <div class="bianji-shanchu mui-clearfix"> <div class="bjsc-lf mui-clearfix"> <span class="zdy-icon-radio active">默認(rèn)地址</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號(hào)江西師范科技大學(xué)科技園訊升信息技術(shù)有限公司 </div> <div class="bianji-shanchu mui-clearfix"> <div class="bjsc-lf"> <span class="zdy-icon-radio">設(shè)為默認(rèn)</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號(hào)江西師范科技大學(xué)科技園訊升信息技術(shù)有限公司 </div> <div class="bianji-shanchu mui-clearfix"> <div class="bjsc-lf"> <span class="zdy-icon-radio">設(shè)為默認(rèn)</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>
效果如下:無(wú)論如何都只能一個(gè)添加樣式,右邊文字也隨點(diǎn)擊改變。
以上所述是小編給大家介紹的jQuery模仿單選按鈕選中效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jQuery獲取選中單選按鈕radio的值
- JQuery radio(單選按鈕)操作方法匯總
- jquery判斷單選按鈕radio是否選中的方法
- jQuery獲取單選按鈕radio選中值與去除所有radio選中狀態(tài)的方法
- jQuery設(shè)置單選按鈕radio選中/不可用的實(shí)例代碼
- 基于jquery自定義的漂亮單選按鈕RadioButton
- jquery實(shí)現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項(xiàng)卡
- jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證
- JQuery操作單選按鈕以及復(fù)選按鈕示例
- jQuery實(shí)現(xiàn)全選按鈕
相關(guān)文章
jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法
這篇文章主要介紹了jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10jQuery Validate 無(wú)法驗(yàn)證 chosen-select元素的解決方法
這篇文章主要介紹了jQuery Validate 無(wú)法驗(yàn)證 chosen-select元素的解決方法,需要的朋友可以參考下2017-05-05基于Jquery實(shí)現(xiàn)表格動(dòng)態(tài)分頁(yè)實(shí)現(xiàn)代碼
項(xiàng)目中經(jīng)常會(huì)對(duì)表格進(jìn)行分頁(yè),以下運(yùn)用jquery對(duì)用戶管理中的用戶表格進(jìn)行分頁(yè)。2011-06-06瘋狂Jquery第一天(Jquery學(xué)習(xí)筆記)
之前一直學(xué)習(xí),現(xiàn)在終于有時(shí)間來(lái)整理一下文檔了。以下文章都是自己學(xué)習(xí)Jquery 的筆記,希望能留下痕跡,也希望能幫助到您2012-05-05jQuery擴(kuò)展方法實(shí)現(xiàn)Form表單與Json互相轉(zhuǎn)換的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了jQuery擴(kuò)展方法實(shí)現(xiàn)Form表單與Json互相轉(zhuǎn)換的相關(guān)知識(shí),并給大家介紹了jquery兩種擴(kuò)展方法,需要的朋友可以參考下2018-09-09setInterval與clearInterval的使用示例代碼
本篇主要是對(duì)setInterval與clearInterval的使用示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01jquery實(shí)現(xiàn)html頁(yè)面 div 假分頁(yè)有原理有代碼
大概原理就是填充后div的總高度 (1000px) 顯示高度(100px) 則頁(yè)面總數(shù)為10頁(yè) 。當(dāng)查看第二頁(yè)時(shí),顯示的div高度為100 - 200之間,以此類推2014-09-09