由于某种原因，可能需要对单选框(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(复选框) 美化的更多相关文章

  1. [oldboy-django][2深入django]Form组件实现生成: select下拉框, checkbox复选框，radio单选框以及如何实现自定义数据格式要求

    1 需求 - 1Form组件如何实现生成选择类标签: select,check, radio - 默认值 - 保留上次输入的值 - 2自定义验证规则 - RegexField - -

  2. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

  3. 纯css3实现的超炫checkbox复选框和radio单选框

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

  4. 2.12 单选框和复选框（radiobox、checkbox）

    2.12 单选框和复选框(radiobox.checkbox) 本篇主要介绍单选框和复选框的操作一.认识单选框和复选框    1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是 ...

  5. Selenium2学习（十五）-- 单选框和复选框（radiobox、checkbox）

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...

  6. 如何让checkbox复选框只能单选

    function框架div 如何让checkbox复选框只能单选 在项目开发中遇到一个这样的问题,要让一列复选框架在任何时间段内只能选择一个. 有人说怎么不用单选框了,因为单选框一旦选择了就不能取消选 ...

  7. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  8. Selenium2+python自动化19-单选框和复选框（radiobox、checkbox）

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...

  9. JQuery对单选框，复选框，下拉菜单的操作

    JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...

随机推荐

  1. 网络编程介绍，C/S 架构，网络通讯协议，osi七层

    网络编程: 什么是网络编程: 网络通常指的是计算机中的互联网,是由多台计算机通过网线或其他媒介相互链接组成的 编写基于网络的应用程序的过程序称之为网络编程 为什么要学习网络编程: 我们已经知道计算机, ...

  2. 导模块的细节：（跨文件导入模块 &模块的两种执行方式） | 包的概念与使用 | 包中的相对导入语法

    今日内容 包: 1. 导入模块的细节 2. 包的概念与使用 3. 包中的相对导入语法 跨文件夹导入模块 1. 假设有一个文件夹a ,a 的下面有一个ma 的模块,如果a文件夹所在目录在环境变量,a文件 ...

  3. Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页

    前言 Bootstrap 是流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.源自于twiteer内部的开发框架. 当前(2019-05)最新版本是v3.3. ...

  4. U盘安装win7"安装程序无法创建新的系统分区" 怎么办

     装WIN7的朋友,不知遇到该类问题没有: 当我们通过PE进行WIN7 纯安装的时候(非ghost安装),系统提示”安装程序无法创建新的系统分区,也无法定位现有分区“,迫使我们操作终断,无法进行. 面 ...

  5. Interceptors - 拦截器

    1.概述 Flume有能力在运行阶段修改/删除Event,这是通过拦截器(Interceptors)来实现的. 拦截器需要实现org.apache.flume.interceptor.Intercep ...

  6. 判断给定的整数n能否表示成连续的m(m>1)个正整数之和

    #include<stdio.h> int main(){ //如果是奇数,肯定满足条件 int num; scanf("%d",&num); ==){ pri ...

  7. 使用HTMLTestRunner生产报告

    HTMLTestRunner下载安装及用法 1. 说明 HTMLTestRunner 是 Python 标准库的 unittest 模块的一个扩展.它生成易于使用的 HTML 测试报告 本文针对Pyt ...

  8. CSP 画图(201512-3)

    问题描述 用 ASCII 字符来画图是一件有趣的事情,并形成了一门被称为 ASCII Art 的艺术.例如,下图是用 ASCII 字符画出来的 CSPRO 字样. ..____.____..____. ...

  9. 2019中山纪念中学夏令营-Day1[JZOJ]

    T1 题目描述: 1999. Wexley接苹果(apple) (File IO): input:apple.in output:apple.out 时间限制: 1000 ms  空间限制: 1280 ...

  10. python-day30(正式学习)

    单例模式 什么是单例模式 单例模式:基于某种方法实例化多次得到实例是同一个 为什么用单例模式 当实例化多次得到的对象中存放的属性都一样的情况,应该将多个对象指向同一个内存,即同一个实例 用类方法来实现 ...