点击选中,再点击取消

html:



购买课程

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++;
        }   
    }

你可能感兴趣的:(点击选中,再点击取消)