html checkbox 自定义美化方式

首先你的checkbox 要是继承了乱七八糟的jquery-mobile…..赶紧先去掉,这个东西以后会令人抓狂。css里面的继承很混乱,优先级很不清晰,jquery也很霸道,所以去掉丑陋的初始框是最佳策略。

然后先给你的checkbox 做点ui设计!!
比如存成两张图片分别为:
images/chkbox.png
images/chkbox_after.png

然后附上两个css样式!

.check{
     backgound-image: url("images/chkbox.png;");

}

.check_after{
     backgound-image: url("images/chkbox_after.png;");

}

然后在你的h

html文件里面找到合适的位置加上checkbox

<p>
    <div id="chk" class="check">
        <input type="checkbox" id ="bababa" style="..." value="" checked="false">看这里 
        //checkbox的作用还是应该定义checked
        <label for="bababa">enenen</label>


    </div>
</p>

大功告成以后,我们就要进入心心向往的jquery环节啦!

<script>
//javascript里面导入jquery不用我多说!
$(document).ready(function(){
    var flag = 0;//定义初始化状态,你懂的
    $("#bababa").click(function(){
        if(flag == 0){
           $("#chk").addClass("check_after");
           $("#bababa").attr("checked","checked");
           flag = 1;
        }
        if(flag == 1){
           $("#chk").removeClass("check_after");
           $("#bababa").removeAttr("checked"); //脑补函数removeAttr应该没记错....
           flag = 0;

        }//记错了也别怪我,鄙人愚钝

    })
})
</script>

当然定义onchange()事件也可行!flag定义在attr()里面, 看你自己的选择。
当然要感慨一句jquery无所不能!!

还有什么问题随时留言!

借博客留言:前端真玄学,还是我太菜了。
没人看的博客,胡写真爽,看来我继续拉低了csdn的博客平均质量。

猜你喜欢

转载自blog.csdn.net/weixin_42078778/article/details/81587299