checkbox复选框美化效果代码

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="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/

爱程序网

Tags：[db:关键字]