首页 / JQUERY / jQuery CSS3自定义美化Checkbox实现代码

jQuery CSS3自定义美化Checkbox实现代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery CSS3自定义美化Checkbox实现代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5422字，纯文字阅读大概需要8分钟。

内容图文

效果图：

jQuery CSS3自定义美化Checkbox实现代码 - 文章图片

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

接下来我们一起来看看实现这款美化版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>

然后我们用jQuery代码来为每一个checkbox和radiobox创建一个div，这个div的classname为check-box和radio-btn。

$("input[name="radio-btn"]").wrap("<div class="radio-btn"><i></i></div>");
$("input[name="check-box"]").wrap("<div class="check-box"><i></i></div>");

那么我们接下来要让原来的checkbox隐藏，同时设置模拟div的样式：

.radio-btn input[type="radio"], .check-box input[type="checkbox"] {
 visibility: hidden;
}


.check-box {
 width: 22px;
 height: 22px;
 cursor: pointer;
 display: inline-block;
 margin: 2px 7px 0 0;
 position: relative;
 overflow: hidden;
 box-shadow: 0 0 1px #ccc;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 background: rgb(255, 255, 255);
 background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ededed", GradientType=0);
 border: 1px solid #ccc;
}
.check-box i {
 background: url("http://hovertree.com/texiao/html5/32/css/check_mark.png") no-repeat center center;
 position: absolute;
 left: 3px;
 bottom: -15px;
 width: 16px;
 height: 16px;
 opacity: .5;
 -webkit-transition: all 400ms ease-in-out;
 -moz-transition: all 400ms ease-in-out;
 -o-transition: all 400ms ease-in-out;
 transition: all 400ms ease-in-out;
 -webkit-transform:rotateZ(-180deg);
 -moz-transform:rotateZ(-180deg);
 -o-transform:rotateZ(-180deg);
 transform:rotateZ(-180deg);
}
.checkedBox {
 -moz-box-shadow: inset 0 0 5px 1px #ccc;
 -webkit-box-shadow: inset 0 0 5px 1px #ccc;
 box-shadow: inset 0 0 5px 1px #ccc;
 border-bottom-color: #fff;
}
.checkedBox i {
 bottom: 2px;
 -webkit-transform:rotateZ(0deg);
 -moz-transform:rotateZ(0deg);
 -o-transform:rotateZ(0deg);
 transform:rotateZ(0deg);
}
/*Custom radio button*/
 .radio-btn {
 width: 20px;
 height: 20px;
 display: inline-block;
 float: left;
 margin: 3px 7px 0 0;
 cursor: pointer;
 position: relative;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 border-radius: 100%;
 border: 1px solid #ccc;
 box-shadow: 0 0 1px #ccc;
 background: rgb(255, 255, 255);
 background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ededed", GradientType=0);
}
.checkedRadio {
 -moz-box-shadow: inset 0 0 5px 1px #ccc;
 -webkit-box-shadow: inset 0 0 5px 1px #ccc;
 box-shadow: inset 0 0 5px 1px #ccc;
}
.radio-btn i {
 border: 1px solid #E1E2E4;
 width: 10px;
 height: 10px;
 position: absolute;
 left: 4px;
 top: 4px;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 border-radius: 100%;
}
.checkedRadio i {
 background-color: #898A8C;
}/* 何问起 hovertree.com */

上面这段CSS3代码就是用样式来自定义div，让div的样式和checkbox和radiobox一样。

最后我们来模拟点击选中和取消选中，这部分也是用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 */

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。

内容总结

以上是互联网集市为您收集整理的jQuery CSS3自定义美化Checkbox实现代码全部内容，希望文章能够帮你解决jQuery CSS3自定义美化Checkbox实现代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/352675.html

来源：【匿名】

【上一篇】使用jQuery.form.js/springmvc框架实现文件上传功能【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jQuery CSS3自定义美化Checkbox实现代码】教程文章相关的互联网学习教程文章

jquery radio、 checkbox、 select 操作【代码】

转载：http://www.haorooms.com/post/checkandselect1、checkbox日常jquery操作。现在我们以下面的html为例进行checkbox的操作。<input id="checkAll" type="checkbox"/>全选 <input name="subBox" type="checkbox"/>项1 <input name="subBox" type="checkbox"/>项2 <input name="subBox" type="checkbox"/>项3 <input name="subBox" type="checkbox"/>项4全选和全部选代码：<script type="text/javascript">$(function() {$("#che...

jQuery1.9.1针对checkbox的调整

在jquery 1.8.x中的版本，我们对于checkbox的选中与不选中操作如下：判断是否选中$(‘#checkbox‘).prop(‘checked‘)设置选中与不选中状态：$(‘#checkbox‘).attr(‘checked‘,true)$(‘#checkbox‘).attr(‘checked‘,false)但此方法在jquery1.9.1中，有些处理不一样IE10，Chrome,FF中，对于选中状态，第一次$(‘#checkbox‘).attr(‘checked‘,true)可以实现但是当通过代码清除选中，下次再通过代码?$(‘#checkbox‘).attr(‘c...

jquery判断checkbox是否选中及改变checkbox状态

有时候判断checkbox是否选中或者说找出某个元素下面所有选中的checkbox的时候，有时候总是不行，每次都要折腾一下，很是烦恼，以为有时候用的jquery版本不一样，选取的方式也不一样，记下来方便以后查看使用。jquery判断checked的三种方法:.attr(‘checked’): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false.prop(‘checked’): //16+:true/false.is(‘:checked’): //所有版本:true/false//别忘记冒号...

jquery控制checkbox全选与全不选【代码】

$("#medicineCheck").change(function () {var isChecked=$("#medicineCheck").is(‘:checked‘);//获取所有checkbox组成的数组var checkedArrs=$("input[name=‘medicineCheckBox‘]");//判断是全选还是反选if(isChecked){checkedArrs.each(function(){$(this).prop(‘checked‘,true);});}else{checkedArrs.each(function(){$(this).removeAttr(‘checked‘,false);});}});medicineCheck 是控制全选和全部选的checkboxcheckedAr...

jQuery实现C#CheckBoxList模糊搜索【代码】

前言最近开发的一套系统中需要对商品进行管理，在选择商品时，要分别从品牌、型号、商品三个类别分别选择对应的选项才能找到需要的商品，三者的关系为：品牌包含型号，型号包含商品，因此使用了三个不同的 asp:CheckBoxList 控件进行开发。但是在开发完成之后，发现当 CheckBoxList 中数据过多的时候，查找起来相当麻烦，因此考虑在控件外部加多一个 Textbox ，并且使用 jQuery 控制不包含关键字的元素隐藏起来。开发思路那么具体...

jquery处理checkbox（复选框）是否被选中

现在如果一个复选框被选中，是用checked=true，checked="checked"也行要用prop代替attr会更好，虽然在jQuery1.6之前版本的attr()方法能正常使用，但是现在必须使用prop()方法代替 <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>checkbox</title></head><body><input type="button" id="btn1" value="全选"><input type="button" id="btn2" value="取消全选"><input type="button" id="btn3" value="选中所有...

$(this).attr("checked") 用jquery取checkbox的值返回undefined

$("#login-showpassword").click(function(){ //$(this).attr("checked") 这个返回undefined //this.checked; 返回true if($(this).is(":checked")) { $("#text-password").val($("#login-password").val()); $("#text-password").show(); $("#login-password").hide(); } else { $("#login-password").val($("#text-password").val()); $("#...

jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中【代码】

jQuery获取Select选择的Text和Value: 语法解释： 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5. var maxIndex=$("#select_i...

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox【代码】【图】

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox1、全选$("#btn1").click(function(){ $("input[name=‘checkbox‘]").attr("checked","true"); }) 2、取消全选（全不选）$("#btn2").click(function(){ $("input[name=‘checkbox‘]").removeAttr("checked"); }) 3、选中所有奇数$("#btn3").click(function(){ $("input[name=‘checkbox‘]:odd").attr("checked","true"); }) 4、选中所有偶数$("#bt...

jquery checkbox选框操作【代码】

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2<html> 3<head> 4<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5<script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 6</head> 7<body> 8<table border="1" align="center"> 9<tr>10<th>状态</th>11<th>用户名</th>12</tr>13<tr>14<td><input type="checkbox"/></td>15<td>赵</td>16</tr>17<tr>18<td><input type...

jQuery 判断checkbox是否被选中 4种方法【代码】

下午写JS验证，有一个需求需要判断 checkbox是否被选择，查阅相关资料后，总结以下4种方法，分享给大家。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery 判断checkbox是否被选中 4种方法</title><script src="jquery-1.8.3.min.js"></script><script>$(function(){$(‘#agree‘).on(‘click‘, function(){if($("input[type=‘checkbox‘]").is(‘:checked‘)){ // 选中返回true,未选中返回false ...

jquery 判断checkbox 是否选中

这是一个蛋疼的节奏，以前写的代码现在失效了。jquery 判断checkbox 是否被选中，刚开始我是这样写的，而且没问题 $("#ziduana").attr("checked")=="checked"后来竟然失效了，后来试了$("ziduana").attr("checked")==true , $("#ziduana").is(":checked")其实这三种判断方式都是可以的，而且我测试过，但总是有几次不行，感觉不稳定。大家一致说 if($("ziduana").is(":checked")) 最佳。我也采用了此类问题对我而言是最痛苦的，能...

jQuery 操作 input 之 checkbox

jQuery 操作 input 之 checkbox 一片HTML 清单：<input type="checkbox" name="hobby" value="棒球"> 棒球 <input type="checkbox" name="hobby" value="乒乓球"> 乒乓球 <input type="checkbox" name="hobby" value="羽毛球"> 羽毛球 <input type="checkbox" name="hobby" value="篮球"> 篮球 <input type="checkbox" name="hobby" value="足球"> 足球 <input type="checkbox" name="checkAll" value=""> 全选1、给每个 item 绑定...

jquery 操作checkbox只能使用一次

进来开发中碰到一个比较奇怪的问题，就是用jquery控制界面中的checkbox全选和全不选的时候，只能第一次成功使用不能重复操作。代码如下：全选$(‘input:checkbox‘).each(function(){ $(this).attr(‘checked‘,true); }); 全不选$(‘input:checkbox‘).each(function(){ $(this).attr(‘checked‘,false); }); 在网上查说是jquery1.8以上存在这个问题，解决方法是用prop全选$(‘input:checkbox‘)....

jQuery对checkbox的各种操作【代码】【图】

1 //注意：操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上（包含）建议用prop2 3 //1、根据id获取checkbox4 $("#cbCheckbox1");5 6 //2、获取所有的checkbox7 $("input[type=‘checkbox‘]");//or8 $("input[name=‘cb‘]");9 10 //3、获取所有选中的checkbox 11 $("input:checkbox:checked");//or 12 $("input:[type=‘checkbox‘]:checked");//or 13 $("input...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / jQuery CSS3自定义美化Checkbox实现代码

jQuery CSS3自定义美化Checkbox实现代码

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuery CSS3自定义美化Checkbox实现代码】教程文章相关的互联网学习教程文章

jquery radio、 checkbox、 select 操作【代码】

jQuery1.9.1针对checkbox的调整

jquery判断checkbox是否选中及改变checkbox状态

jquery控制checkbox全选与全不选【代码】

jQuery实现C#CheckBoxList模糊搜索【代码】

jquery处理checkbox（复选框）是否被选中

$(this).attr("checked") 用jquery取checkbox的值返回undefined

jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中【代码】

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox【代码】【图】

jquery checkbox选框操作【代码】

jQuery 判断checkbox是否被选中 4种方法【代码】

jquery 判断checkbox 是否选中

jQuery 操作 input 之 checkbox

jquery 操作checkbox只能使用一次

jQuery对checkbox的各种操作【代码】【图】

JQUERY - 相关标签

CSS3 - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程