html:
<div class="checkBuy">
<label class="radioImg" for="radioInput"><input type="radio" name="" id="radioInput" class="radioInput"><span class="hookPic"></span></label>
<span class="buyCont">购买课程</span>
</div>
css:
.radioImg,.vipLabel{
width: 1.4286rem;
height: 1.4286rem;
display: inline-block;
cursor: pointer;
}
radioInput,#radioVip{
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.radioImg input[type="radio"] + span,
.vipLabel input[type="radio"] + span{
width: 1.4286rem;
height: 1.4286rem;
display: inline-block;
background-image: url(../img/input.png);
background-size: cover;
background-repeat: no-repeat;
position: relative;
top: -1.4rem;
}
.vipLabel input[type="radio"] + span{
top: -1.3rem;
margin-left: 1.4286rem;
}
/.radioImg input[type="radio"]:checked + span,
.vipLabel input[type="radio"]:checked + span{
background-image: url(../img/inputChoose.png);
}/
.checkBuy{
display: flex;
align-items: center;
margin-left: 1.4286rem;
}
.buyCont{
margin-left: 0.71rem;
font-size: 1.1429rem;
color: #19140D;
}
js:
/*$(function() {
var count = 0;
var vipCount = 0;
$('.radioInput').click(function(){
var $radio = $(this);
// 方法一
if ($radio.data('waschecked') == true){
$('.hookPic').css('background-image','url(../img/input.png)'); //没选中图片
$radio.prop('checked', false);
$radio.data('waschecked', false);
} else {
$('.hookPic').css('background-image','url(../img/inputChoose.png)'); //选中图片
$radio.prop('checked', true);
$radio.data('waschecked', true);
}
//方法二:
if(count == 0){
$('.hookPic').css('background-image','url(../img/inputChoose.png)');
count++;
}else if(count == 1){
$('.hookPic').css('background-image','url(../img/input.png)');
count--;
}
})
//vip
$('#radioVip').click(function(){
if(vipCount == 0){
$('.vipPic').css('background-image','url(../img/inputChoose.png)');
vipCount++;
}else if(vipCount == 1){
$('.vipPic').css('background-image','url(../img/input.png)');
vipCount--;
}
})
})*/
//方法三 点击选中,再点击取消
var buyCour = document.getElementById('radioInput');
var hookPic = document.getElementsByClassName('hookPic');
var checked = 1;
/*buyCour.onclick = function(){
if(checked == 1){
hookPic[0].style.backgroundImage = "url(../img/inputChoose.png)";
checked--;
}else if(checked == 0){
hookPic[0].style.backgroundImage = "url(../img/input.png)";
checked++;
}
}*/
buyCour.onclick = click;
function click(){
if(checked == 1){
hookPic[0].style.backgroundImage = "url(../img/inputChoose.png)";
checked--;
}else if(checked == 0){
hookPic[0].style.backgroundImage = "url(../img/input.png)";
checked++;
}
}