radio(单选框)/checkbox(复选框) 美化
由于某种原因，可能需要对单选框(radio)或复选框(checkbox)进行美化，那么直接修改样式是行不通，要实现就需要添加js，以下js依赖于jquery
radio.js:
function radAchk(dom,cls){
var self = this;
if(!cls){
cls = "input-skin";
}
dom.each(function(){
var $t = $(this);
self.addUI($t,cls);
$t.click(function(){
self.eventIE();
});
});
self.eventIE();
}
radAchk.prototype.addUI = function(dom,cls){
dom.after($('<span class="'+ cls +'"></span>'));
}
radAchk.prototype.eventIE = function(dom){
if(window.addEventListener){//判断是否是ie7\ie8
return false;
}
setTimeout(function(){
dom.filter(":checked").trigger('change.checkbox');
dom.filter(":disabled").parent().addClass("disabled");
});
dom.on("change.checkbox",function(){
dom.not(":checked").parent().removeClass("active");
$(this).parent().addClass("active");
});
}
;(function($){
$.fn.radAndchk = function(cls){//cls 皮肤class
new radAchk(this,cls);
}
})(jQuery);
美化单选框(input[type=radio]):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>radio checkbox</title>
<style>
*{ margin:0; padding:0; }
.radio-p{ height:30px; line-height:30px; margin-left:10px; }
.js-radio-box{ position:relative; overflow:hidden; padding-left:25px; cursor:pointer; }
.js-radio-box input[type=radio]{ opacity:0; filter:alpha(opacity=0); position:absolute; left:0; z-index:2; }
.js-radio-box .radio-skin{ position:absolute; left:0; top:50%; margin-top:-7px; display:inline-block; background:url("img/icon.png") no-repeat; width:16px; height:16px; z-index:1; }
.js-radio-box:hover .radio-skin{ background-position:0 -20px; }
.js-radio-box input:disabled + .radio-skin,.js-radio-box.disabled .radio-skin{ background-position:0 -20px; cursor:default; }
.js-radio-box input:checked + .radio-skin,.js-radio-box.active .radio-skin{ background-position:0 -40px; }
</style>
<script src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<p class="radio-p"></p>
<p class="radio-p"><label class="js-radio-box"><input type="radio" checked="true" value="1" name="name1" class="radio1" />单选1</label></p>
<p class="radio-p"><label class="js-radio-box"><input type="radio" value="2" name="name1" />单选2</label></p>
<p class="radio-p"><label class="js-radio-box"><input type="radio" disabled="disabled" value="3" name="name1" />单选3</label></p>
<p class="radio-p"></p>
<p class="radio-p"><label class="js-radio-box"><input type="radio" value="12" name="name2" />单选12</label></p>
<p class="radio-p"><label class="js-radio-box"><input type="radio" disabled="true" value="13" name="name2" />单选13</label></p> <script src="js/radio.js"></script>
<script>
$("input[type=radio]").radAndchk("radio-skin");//radio-skin 皮肤class
</script>
</body>
</html>
运行后，样式如下：
美化复选框(input[type=checkbox]):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checkbox checkbox</title>
<style>
*{ margin:0; padding:0; }
.checkbox-p{ height:30px; line-height:30px; margin-left:10px; }
.js-checkbox-box{ position:relative; overflow:hidden; padding-left:25px; cursor:pointer; }
.js-checkbox-box input[type=checkbox]{ opacity:0; filter:alpha(opacity=0); position:absolute; left:0; z-index:2; }
.js-checkbox-box .checkbox-skin{ position:absolute; left:0; top:50%; margin-top:-7px; display:inline-block; background:url("img/icon-chk.png") no-repeat; width:20px; height:16px; z-index:1; }
.js-checkbox-box:hover .checkbox-skin{ background-position:0 -40px; }
.js-checkbox-box input:disabled + .checkbox-skin,.js-checkbox-box.disabled .checkbox-skin{ background-position:0 -40px; cursor:default; }
.js-checkbox-box input:checked + .checkbox-skin,.js-checkbox-box.active .checkbox-skin{ background-position:0 -20px; }
</style>
<script src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<p class="checkbox-p"></p>
<p class="checkbox-p"><label class="js-checkbox-box"><input type="checkbox" checked="true" value="1" name="name1" class="checkbox1" />单选1</label></p>
<p class="checkbox-p"><label class="js-checkbox-box"><input type="checkbox" value="2" name="name1" />单选2</label></p>
<p class="checkbox-p"><label class="js-checkbox-box"><input type="checkbox" disabled="disabled" value="3" name="name1" />单选3</label></p>
<p class="checkbox-p"></p>
<p class="checkbox-p"><label class="js-checkbox-box"><input type="checkbox" value="12" name="name2" />单选12</label></p>
<p class="checkbox-p"><label class="js-checkbox-box"><input type="checkbox" disabled="true" value="13" name="name2" />单选13</label></p> <script src="js/radio.js"></script>
<script>
$("input[type=checkbox]").radAndchk("checkbox-skin");//checkbox-skin 皮肤class
</script>
</body>
</html>
运行后，样式如下：
单选框或复选框的样式可以根据设计图修改。
这个js不影响原本的js方法，如要给radio添加click事件，可以直接：
$("input[type=radio]").click(function(){
……
});
也可以根据需要设置checked、disabled属性。
radio(单选框)/checkbox(复选框) 美化的更多相关文章
- [oldboy-django][2深入django]Form组件实现生成: select下拉框, checkbox复选框，radio单选框以及如何实现自定义数据格式要求
1 需求 - 1Form组件如何实现生成选择类标签: select,check, radio - 默认值 - 保留上次输入的值 - 2自定义验证规则 - RegexField - -
- 纯css3简单实用的checkbox复选框和radio单选框
昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览 源码下载 ...
- 纯css3实现的超炫checkbox复选框和radio单选框
之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览 源码下载 这个实例完全由css3实现 ...
- 2.12 单选框和复选框（radiobox、checkbox）
2.12 单选框和复选框(radiobox.checkbox) 本篇主要介绍单选框和复选框的操作一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是 ...
- Selenium2学习（十五）-- 单选框和复选框（radiobox、checkbox）
本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...
- 如何让checkbox复选框只能单选
function框架div 如何让checkbox复选框只能单选 在项目开发中遇到一个这样的问题,要让一列复选框架在任何时间段内只能选择一个. 有人说怎么不用单选框了,因为单选框一旦选择了就不能取消选 ...
- css input checkbox复选框控件 样式美化的多种方案
checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...
- Selenium2+python自动化19-单选框和复选框（radiobox、checkbox）
本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...
- JQuery对单选框，复选框，下拉菜单的操作
JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...
随机推荐
- 【神经网络与深度学习】ZLIB介绍
zlib类库提供了很多种压缩和解压缩的方式,由于时间的关系我只学习一下内容,以下是我在实现web 服务器压缩数据网页中使用到一些函数和常用数据结构.常量等. zlib使用过程 压缩过程:deflate ...
- 使用choco 在windows 环境安装kubectl 并配置
首先安装choco #以管理员身份运行cmd命令 @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -N ...
- java Proxy InvocationHandler 动态代理实现详解
spring 两大思想,其一是IOC,其二就是AOP..而AOP的原理就是java 的动态代理机制.这里主要记录java 动态代理的实现及相关类的说明. java 动态代理机制依赖于Invocati ...
- Interceptors - 拦截器
1.概述 Flume有能力在运行阶段修改/删除Event,这是通过拦截器(Interceptors)来实现的. 拦截器需要实现org.apache.flume.interceptor.Intercep ...
- synchronized（三） 锁的膨胀过程（锁的升级过程）深入剖析
警告⚠️:本文耗时很长,先做好心理准备................哈哈哈 本篇我们讲通过大量实例代码及hotspot源码分析偏向锁(批量重偏向.批量撤销).轻量级锁.重量级锁及锁的膨胀过程(也就是 ...
- The Maze
There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...
- Shell初学（六）Linux Shell 时间运算以及时间差计算方法
Linux Shell 时间运算以及时间差计算方法 时间的加减,以及时间差的计算. 1. 时间加减 这里处理方法,是将基础的时间转变为时间戳,然后,需要增加或者改变时间,变成 秒. 如:1990-01 ...
- 从零开始，SpreadJS新人学习笔记【第5周】
复制粘贴.单元格格式和单元格类型 本周,让我们一起来学习SpreadJS 的复制粘贴.单元格格式和单元格类型,希望我的学习笔记能够帮助你们,从零开始学习 SpreadJS,并逐步精通. 在此前的学习笔 ...
- <<大道至简>>伪代码
import.java.大道至简.* public class YuGong { public static void main(String [] args) throws IOException ...
- linux连接Windows系统之项目连接
在桥接模式下 在linux内需要设置 防火墙关闭 在Windows中连接 linux的ip连接 ***项目 在linux中命令行输入setup-->防火墙配置-->空格-->确定-- ...