你的位置:首页 > 软件开发 > 网页设计 > CSS3和jQuery实现的自定义美化Checkbox

CSS3和jQuery实现的自定义美化Checkbox

发布时间:2016-05-12 13:00:05
效果图:是不是比默认的好看多了,个人的审美观应该还是可以的。当然我们可以在这里查看DEMO演示。接下来我们一起来看看实现这款美化版Checkbox的源代码。主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQ ...

效果图:

CSS3和jQuery实现的自定义美化Checkbox

是不是比默认的好看多了,个人的审美观应该还是可以的。

当然我们可以在这里查看DEMO演示。

接下来我们一起来看看实现这款美化版Checkbox的源代码。主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。

先来看看HTML代码:

<div class="wrapper">    <ul>      <li>        <p>Gender:</p>      </li>      <li>        <input type="radio" name="radio-btn" />Male      </li>      <li>        <input type="radio" name="radio-btn" />Female      </li>    </ul>    <ul>      <li>        <p>推荐网站:</p>      </li>      <li>        <input type="checkbox" name="check-box" /> <span>何问起</span>      </li>      <li>        <input type="checkbox" name="check-box" /> <span>柯乐义</span>      </li>      <li>        <input type="checkbox" name="check-box" /> <span>hwq2.com</span>      </li>      <li>        <input type="checkbox" name="check-box" /> <span>hovertree.net</span>      </li>    </ul>  </div>
$("input[name="radio-btn"]").wrap("<div ><i></i></div>");那么我们接下来要让原来的checkbox隐藏,同时设置模拟div的样式:.radio-btn input[type="radio"], .check-box input[type="checkbox"] {最后我们来模拟点击选中和取消选中,这部分也是用jQuery来实现:

$(".radio-btn").on("click", function () {  var _this = $(this),    block = _this.parent().parent();  block.find("input:radio").attr("checked", false);  block.find(".radio-btn").removeClass("checkedRadio");  _this.addClass("checkedRadio");  _this.find("input:radio").attr("checked", true);});$.fn.toggleCheckbox = function () {  this.attr("checked", !this.attr("checked"));}$(".check-box").on("click", function () {  $(this).find(":checkbox").toggleCheckbox();  $(this).toggleClass("checkedBox");});/* 何问起 hovertree.com */

原标题:CSS3和jQuery实现的自定义美化Checkbox

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。