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