做了一个简单的自定义radio的样式
基于mui和jq
没什么难点,主要是利用label 标签的特效 用for 将input的id进行绑定,点击这个就相当于选中input
然后用jq的change时间设置class
新手思维,可以优化。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/mui.css"/>
<link href="../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/general.css"/>
<style type="text/css">
.mdata{
width: 100%;
background-color: white;
padding: 0.5em;
display: flex;
justify-content: flex-start;
align-items: center;
}
.mimg{
margin: 0.5em;
}
.mimg>img{
width: 70px;
height: 70px;
}
.mtext{
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
input[type=radio]{
position: absolute;
left: -999px;
}
.inpbut{
width: 20%;
height: 35px;
border: 1px solid #C7C7C7;
border-radius: 10px;
background-color: white;
text-align: center;
line-height: 35px;
margin: 5%;
}
.butlist{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
background-color: white;
}
.selectdiv{
background-color: rgba(0,122,255,1);
border: 0;
}
.selectdiv>label{
color: white;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav hbg">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
<h1 class="mui-title">快速充值</h1>
</header>
<div class="mui-content">
<div class="mdata">
<div class="mimg">
<img src="../images/user-photo.png"/>
</div>
<div class="mtext">
<span id="">
某某某
</span>
<span class="fe08">
卡号:123456
</span>
<span class="fe08">
会员等级:31 <span style="padding-left: 1em;">
积分:0.00
</span>
</span>
</div>
</div>
<div style="padding: 0.5em;" class="fe09">
快速选择充值金额
</div>
<div class="butlist">
<div class="inpbut selectdiv">
<label for="10">¥10</label>
<input type="radio" name="sradio" id="10" value="" />
</div>
<div class="inpbut">
<label for="20">¥20</label>
<input type="radio" name="sradio" id="20" value="" />
</div>
<div class="inpbut">
<label for="30">¥30</label>
<input type="radio" name="sradio" id="30" value="" />
</div>
<div class="inpbut">
<label for="40">¥40</label>
<input type="radio" name="sradio" id="40" value="" />
</div>
<div class="inpbut">
<label for="50">¥50</label>
<input type="radio" name="sradio" id="50" value="" />
</div>
<div class="inpbut">
<label for="100">¥100</label>
<input type="radio" name="sradio" id="100" value="" />
</div>
</div>
</div>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[type=radio][name=sradio]').change(function(e) {
let radios = $('input[type=radio][name=sradio]');
for(let i = 0; i < radios.length; i++){
if(this.id == radios[i].id){
let f = $(radios[i]).parent();
f.addClass('selectdiv');
}else{
let f = $(radios[i]).parent();
f.removeClass('selectdiv');
}
}
});
});
</script>
</body>
</html>
以上是全部代码