首頁 > web前端 > js教程 > 主體

jQuery模仿單選按鈕選取效果實例程式碼

怪我咯
發布: 2017-03-31 09:33:29
原創
1683 人瀏覽過

剛開始學jquery,工作中有些css表單中的按鈕美化很麻煩,所以想著用jquery來替換,複選框的jquery很容易,就是簡單的樣式切換效果,用toggleClass()方法即可。

而單選框之前一直不知道怎麼做,因為在單選框中選中一個,其他的都必須移除掉樣式,如果2個單選框在同級中則用siblings()則可直接找到其他單選框移除掉樣式即可。鑑於自己工作

是循環列表模式,每個

  • 裡面都帶有一個單選框,未發現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>
    <p class="xp-content02">
    <p class="tt02">
    编辑地址
    </p>
    <p class="bianji-dizhi">
    <p class="tt09">
    <span>15354656536</span>
    <span>苏定芳</span>
    </p> 
    <p class="your-adress02">
    南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
    </p>
    <p class="bianji-shanchu mui-clearfix">
    <p class="bjsc-lf mui-clearfix">
    <span class="zdy-icon-radio active">默认地址</span>
    </p>
    <p class="bjsc-rt">
    <span class="mui-icon mui-icon-compose"></span>编辑
    <span class="mui-icon mui-icon-trash"></span>删除
    </p>
    </p>
    </p>
    <p class="greybg02"></p>
    <p class="bianji-dizhi">
    <p class="tt09">
    <span>15354656536</span>
    <span>苏定芳</span>
    </p> 
    <p class="your-adress02">
    南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
    </p>
    <p class="bianji-shanchu mui-clearfix">
    <p class="bjsc-lf">
    <span class="zdy-icon-radio">设为默认</span> 
    </p>
    <p class="bjsc-rt">
    <span class="mui-icon mui-icon-compose"></span>编辑
    <span class="mui-icon mui-icon-trash"></span>删除
    </p>
    </p>
    </p>
    <p class="greybg02"></p>
    <p class="bianji-dizhi">
    <p class="tt09">
    <span>15354656536</span>
    <span>苏定芳</span>
    </p> 
    <p class="your-adress02">
    南昌市北京东路1999号江西师范科技大学科技园讯升信息技术有限公司
    </p>
    <p class="bianji-shanchu mui-clearfix">
    <p class="bjsc-lf">
    <span class="zdy-icon-radio">设为默认</span> 
    </p>
    <p class="bjsc-rt">
    <span class="mui-icon mui-icon-compose"></span>编辑
    <span class="mui-icon mui-icon-trash"></span>删除
    </p>
    </p>
    </p>
    <p class="greybg02"></p>
    </body>
    </html>
    登入後複製

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

    jQuery模仿單選按鈕選取效果實例程式碼

    以上是jQuery模仿單選按鈕選取效果實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    最新問題
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!