欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery模仿單選按鈕選中效果

 更新時(shí)間:2016年06月24日 10:35:25   作者:小旭依然  
單選按鈕以及復(fù)選按鈕的使用情況還是蠻多的,多選按鈕使用toggleClass()方法就可以實(shí)現(xiàn),下面小編給大家介紹單選按鈕的實(shí)現(xiàn),感興趣的朋友一起看下吧

剛開(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)站的支持!

相關(guān)文章

最新評(píng)論