模拟美化checkbox复选框代码实例

模拟美化checkbox复选框代码实例:
本章节通过代码实例介绍一下如何模拟实现checkbox复选框效果。
由于自带的复选框功能实在是不够美观，下面就通过代码实例介绍一下。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.checkbox{
  width:15px;
  height:15px;
  display:block;
  float:none;
  border:1px solid #DBDBDB;
  background:#F5F7F9;
  cursor:pointer;
  position:absolute;
  top:0;
  left:0;
}
.checkbox-con .cur{
  border:none;
  width:17px;
  height:17px;
  background:url(mytest/jQuery/gou.png) no-repeat;
}
.checkbox-con span{
  display:inline-block;
  position:relative;
  padding-left:20px;
  margin-right:10px;
}
.checkbox-con .ipt-hide{
  position:absolute;
  width:0;
  height:0;
  border:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  $('.checkbox').on('click',function(){
    if($(this).siblings("input[type='checkbox']").is(':checked')){
      $(this).removeClass('cur');
      $(this).siblings("input[type='checkbox']").removeProp('checked')
    }
    else{
      $(this).addClass('cur');
      $(this).siblings("input[type='checkbox']").prop('checked','checked')
    }
  });
});
</script>
</head>
<body>
<div class="checkbox-con">
  <span>
    <input type="checkbox"  class="ipt-hide">
    <label class="checkbox"></label>蚂蚁部落一
  </span>
  <span>
    <input type="checkbox"  class="ipt-hide">
    <label class="checkbox"></label>蚂蚁部落二
  </span>
</div>
</body>
</html>

上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$('.checkbox').on('click',function(){})，为class属性值为checkbox的元素注册click事件处理函数。
（3）.if($(this).siblings("input[type='checkbox']").is(':checked')){
  $(this).removeClass('cur');
  $(this).siblings("input[type='checkbox']").removeProp('checked')
}，判断复选框是否被选中。
如果被选中则删除label标签的cur样式类，这样的话就没有勾号图片背景了。
（4）.else{
  $(this).addClass('cur');
  $(this).siblings("input[type='checkbox']").prop('checked','checked')
}，否则的话就是添加cur样式类，并将复选框选中。
二.相关阅读:
（1）.on()可以参阅jquery的on()绑定事件处理函数详解一章节。
（2）.siblings()可以参阅jQuery的siblings()方法一章节。
（3）.input[type='checkbox']可以参阅jQuery的[attribute=value]选择器一章节。
（4）.is()方法可以参阅jQuery的is()方法一章节。
（5）.:checked可以参阅jQuery的:checked选择器一章节。
（6）.removeProp()可以参阅jQuery的removeProp()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18243

更多内容可以参阅:http://www.softwhy.com/jquery/

爱程序网

Tags：[db:关键字]