jQuery单选多选按钮美化插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery单选多选按钮美化插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery单选多选按钮美化插件</title>
<link href="css/ion.checkRadio.cloudy.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/ion.checkRadio.min.js"></script>
</head>
<body>
<div class="zzsc">
单选按钮美化：
<div class="js-demo-1">
性别：
<label><input type="radio" name="radio" value="0" checked /> 男</label>
<label><input type="radio" name="radio" value="1" />女</label>
<label><input type="radio" name="radio" value="3" />保密</label>
</div>
多选按框美化：
<div class="js-demo-2">
兴趣爱好：
<label><input type="checkbox" name="checkbox" value="0" checked /> 交友聊天</label>
<label><input type="checkbox" name="checkbox" value="1" />网络游戏</label>
<label><input type="checkbox" name="checkbox" value="2" />程序编码</label>
<label><input type="checkbox" name="checkbox" value="3" />网上购物</label>
</div>
<script language="javascript">
$(".js-demo-1").find("input").ionCheckRadio();
$(".js-demo-2").find("input").ionCheckRadio();
</script>
</div>
</body>
</html>

JS代码(ion.checkRadio.min.js):

// Ion.CheckRadio | version 2.0.0 | https://github.com/IonDen/ion.CheckRadio;
	(function(f,h){
	if(!f.fn.ionCheckRadio){
	String.prototype.trim||function(){
	var a=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
	String.prototype.trim=function(){
	return this.replace(a,"")}
}
();
	var k={
}
,l={
}
,n=function(a){
	this.group=a.content;
	this.type=a.type;
	this.$group=f(this.group);
	this.observer=this.old=null;
	this.init()}
;
	n.prototype={
	init:function(){
	this.$group.eq(0).hasClass("icr-input")?this.prepare():this.createHTML()}
,prepare:function(){
	var a=this,e,b;
	for(b=0;
	b<this.group.length;
	b++)e=f(this.group[b]),e=e.parent().parent(),f.data(this.group[b],"icr-parent",e),this.presetChecked(this.group[b]),this.presetDisabled(this.group[b]);
	this.$group.on("change",function(){
	a.change(this)}
);
	this.$group.on("focus",function(){
	a.focus(this)}
);
	this.$group.on("blur",function(){
	a.blur(this)}
);
	h.MutationObserver&&this.setUpObserver()}
,setUpObserver:function(){
	var a=this,e,b;
	this.observer=new MutationObserver(function(b){
	b.forEach(function(b){
	e=b.target;
	"disabled"===b.attributeName&&a.toggle(a.getParent(e),e.disabled,"disabled")}
)}
);
	for(b=0;
	b<this.group.length;
	b++)this.observer.observe(this.group[b],{
	attributes:!0}
)}
,destroy:function(){
	this.$group.off();
	this.observer&&(this.observer.disconnect(),this.observer=null)}
,presetChecked:function(a){
	a.checked&&(this.toggle(this.getParent(a),!0,"checked"),"radio"===this.type&&(this.old=a))}
,presetDisabled:function(a){
	a.disabled&&this.toggle(this.getParent(a),!0,"disabled")}
,change:function(a){
	this.toggle(this.getParent(a),a.checked,"checked");
	"radio"===this.type&&this.old&&this.old!==a&&this.toggle(this.getParent(this.old),this.old.checked,"checked");
	this.old=a}
,focus:function(a){
	this.toggle(this.getParent(a),!0,"focused")}
,blur:function(a){
	this.toggle(this.getParent(a),!1,"focused")}
,toggle:function(a,e,b){
	e?a.addClass(b):a.removeClass(b)}
,getParent:function(a){
	return f.data(a,"icr-parent")}
,createHTML:function(){
	var a=[],e=[],b=[],q=[],h=[],l=[],n=[],r=[],p=this,u=function(a){
	var b=[];
	a=a[0].childNodes;
	var d,c;
	for(c=0;
	c<a.length;
	c++)b.push(a[c]);
	for(;
	b.length;
	){
	d=b[0];
	if(3===d.nodeType){
	if(a=d.nodeValue.trim())break}
else if(1===d.nodeType)for(a=d.childNodes,c=0;
	c<a.length;
	c++)b.push(a[c]);
	Array.prototype.splice.call(b,0,1)}
b=d.parentNode.innerHTML;
	0<=b.indexOf("<input")&&(d=b.indexOf("<input"),b=b.slice(d),d=b.indexOf(">"),b=b.slice(d+1).trim());
	return b}
;
	this.$group.each(function(g){
	var m,d=f(this);
	m=d.prop("className");
	var c=d.prop("type"),k=d.prop("name"),p=d.prop("value"),v=d.prop("checked"),w=d.prop("disabled"),t=d.prop("id");
	a.push(m);
	e.push(c);
	b.push(k);
	q.push(p);
	l.push(v);
	n.push(w);
	m=t?f("label[for='"+t+"']"):d.closest("label");
	h.push(u(m));
	c='<label class="icr-label"> <span class="icr-item type_{
	type}
"></span> <span class="icr-hidden"><input class="icr-input{
	class_list}
" type="{
	type}
" name="{
	name}
" value="{
	value}
"{
	disabled}
{
	checked}
/></span> <span class="icr-text">{
	text}
</span></label>'.replace(/\{
	class_list\}
/,a[g]);
	c=c.replace(/\{
	type\}
/g,e[g]);
	c=c.replace(/\{
	name\}
/,b[g]);
	c=c.replace(/\{
	value\}
/,q[g]);
	c=c.replace(/\{
	text\}
/,h[g]);
	c=n[g]?c.replace(/\{
	disabled\}
/,"disabled"):c.replace(/\{
	disabled\}
/,"");
	c=l[g]?c.replace(/\{
	checked\}
/,"checked"):c.replace(/\{
	checked\}
/,"");
	m.after(c);
	g=m.next();
	r.push(g[0]);
	d.remove();
	m.remove()}
);
	this.$group=f(r).find("input");
	this.$group.each(function(a){
	p.group[a]=this;
	k[b[0]][a]=this}
);
	this.prepare()}
}
;
	f.fn.ionCheckRadio=function(){
	var a,e=[],b,f;
	for(a=0;
	a<this.length;
	a++)b=this[a],f=b.name,"radio"!==b.type&&"checkbox"!==b.type||!f?h.console&&h.console.warn&&h.console.warn("Ion.CheckRadio:Some inputs have wrong type or absent name attribute!"):(k[f]={
	type:b.type,content:[]}
,e.push(b));
	for(a=0;
	a<e.length;
	a++)b=e[a],f=b.name,k[f].content.push(b);
	for(a in k)l[a]&&(l[a].destroy(),l[a]=null),l[a]=new n(k[a])}
}
}
)(jQuery,window);

CSS代码(ion.checkRadio.cloudy.css):

@charset "utf-8";/*框架预览 CSS*/
.zzsc{background:#DEDEDE;padding:50px;color:#333;}
.zzsc:after{height:0;clear:both;}
}
/*End*/
/*主要CSS*/
.icr-label{position:relative;display:inline-block;}
.icr-hidden{position:absolute;display:block;top:0;left:0;width:0;height:0;overflow:hidden;}
.icr-input{position:absolute;display:block;top:-20px;left:-20px;}
.icr-text{display:inline;vertical-align:middle;}
.icr-item{position:relative;display:inline-block;vertical-align:middle;}
/* Sprite positions */
.icr-label .type_checkbox{background-position:0 0;}
.icr-label .type_radio{background-position:0 -48px;}
.icr-label:hover .type_checkbox{background-position:-50px 0;}
.icr-label:hover .type_radio{background-position:-50px -48px;}
.icr-label.checked .type_checkbox{background-position:-150px 0;}
.icr-label.checked .type_radio{background-position:-150px -48px;}
.icr-label.checked:hover .type_checkbox{background-position:-150px 0;}
.icr-label.checked:hover .type_radio{background-position:-150px -48px;}
.icr-label.disabled{opacity:0.5;}
.lt-ie9 .icr-label.disabled{filter:alpha(opacity=50);}
.icr-label.disabled .type_checkbox{background-position:0 0 !important;}
.icr-label.disabled .type_radio{background-position:0 -50px !important;}
.icr-label.checked.disabled .type_checkbox{background-position:-100px 0 !important;}
.icr-label.checked.disabled .type_radio{background-position:-100px -50px !important;}
.icr-label{padding-right:2px;margin:0 5px 5px 0;}
.icr-item{width:23px;height:23px;background:url(../img/icr-green-skin.png) no-repeat;}
.icr-label.disabled{opacity:0.4;}
.icr-label.focused .type_checkbox:after{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.icr-label.focused .type_radio:after{-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;}
.js-demo-1,.js-demo-2{margin-bottom:30px;line-height:38px;}
label{margin-right:20px!important;}

附件:下载该文件资源,减少时间成本(增值服务)