checkbox复选框美化效果:
复选框默认外表的美观度差强人意,能够满足美观度要求不高的页面,但是如果对于页面要求较为精致,那可能就过于勉强了,下面就一段对复选框进行美化的代码实例,希望能够给大家带来一定的帮助。
代码实例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.CheckBoxClass{display:none;}.CheckBoxLabelClass{ background:url("mytest/jQuery/UnCheck.png") no-repeat; padding-left:30px; padding-top:3px; margin:5px; height:28px; width:150px; display:block;}.CheckBoxLabelClass:hover{text-decoration:underline;}.LabelSelected{background:url("mytest/jQuery/Check.png") no-repeat;}</style><script type="text/javascript" src='/images/loading.gif' data-original="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){ $(".CheckBoxClass").change(function(){ if($(this).is(":checked")){ $(this).next("label").addClass("LabelSelected"); } else{ $(this).next("label").removeClass("LabelSelected"); } });})</script></head><body><div> <input id="CheckBox1" type="checkbox" class="CheckBoxClass"/> <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">蚂蚁部落一</label> <input id="CheckBox2" type="checkbox" class="CheckBoxClass"/> <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">蚂蚁部落二</label></div></body></html>
以上代码实现了我们的要求,对复选框进行美化效果,下面简单介绍一下实现过程:
一.实现原理:
checkbox是隐藏的,然后利用<label>标签和复选框建立起联系,点击<label>就能够实现复选框的选中与取消选中,然后通过判断复选框的状态,设置<label>的背景图片,这样就实现了效果。
二.相关阅读:
1.change事件可以参阅jQuery的change事件一章节。
2. is()函数可以参阅jQuery的is()方法一章节。
3.:checked可以参阅jQuery的:checked选择器一章节。
4.next()函数可以参阅jQuery的next()方法一章节。
5.addClass()函数可以参阅jQuery的addClass()方法一章节。
6.removeClass()函数可以参阅jQuery的removeClass()方法一章节。
7.<label>标签可以参阅HTML的<label>标签一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10992
原文地址是:http://www.softwhy.com/
原标题:checkbox复选框美化效果代码
关键词: