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

快乐打工仔 分类:实例代码

本章节通过代码实例介绍一下如何模拟实现checkbox复选框效果。

由于自带的复选框功能实在是不够美观,下面就通过代码实例介绍一下。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()一章节。

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

回复

我来回复
  • 暂无回复内容