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">enenenlabel>


    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的博客平均质量。