点击选中,再点击取消

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++;
        }   
    }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML表单HTML表单用于搜集用户输入HTML表单常用属性及说明:属性描述accept-charset规定在被提...
    Lv_0阅读 3,493评论 0 1
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,752评论 32 459
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 6,202评论 0 2
  • 小胖是她的外号,就是因为胖。 她有很多过外号,可是小胖沿用至今。小胖不介意别人在任何场合叫她小胖,她总是笑眯眯的,...
    朱木子阅读 2,350评论 0 5
  • 只强递过水杯给大鹏,大鹏没有接,他从口袋里摸出烟,拿出一根又点着了,他抽了两口,然后低着头问只强:“咱俩连咱们市都...
    伪编剧青鸟阅读 2,256评论 0 1

友情链接更多精彩内容