«

jQuery模仿单选按钮选中效果

时间:2024-3-2 09:02     作者:韩俊     分类: Javascript


刚开始学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>

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

以上所述是小编给大家介绍的jQuery模仿单选按钮选中效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!

标签: javascript

热门推荐