你的位置:首页 > Java教程

[Java教程]模拟美化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/