用图片代替表单的单选、复选按钮

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<title>用图片代替表单的单选、复选按钮</title>
<style type="text/css">
fieldset {
margin:5px;
padding:0 12px 12px 12px;
border:1px solid #D4D4D4;
}
legend {
	font-weight:bold;
}
</style>
<script language="javascript" type="text/javascript">
function getid(id){return document.getElementById(id);}
function gettag(tag,obj){if(obj){return obj.getElementsByTagName(tag)}else{return document.getElementsByTagName(tag)}}
function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!="function"){window.onload=func;}else{window.onload=function(){oldonload();func();}};}
function SetBgPos(obj,x,y){
	var isIE = (navigator.userAgent.indexOf("MSIE") != -1);  
	if(isIE){obj.style.backgroundPositionX=x;obj.style.backgroundPositionY=y;}
	else{obj.style.backgroundPosition=x+' '+y;}
}
function LoadCheckBox(){
if(gettag("input")){
	var r=gettag("input");
	function select_element(obj){
	c=obj.checked;d=obj.disabled;
	if(obj.type=="checkbox"){SetBgPos(obj.parentNode,0,(c)?((d)?"-550px":"-450px"):((d)?"-400px":"-300px"));}
	else{SetBgPos(obj.parentNode,0,(c)?((d)?"-250px":"-150px"):((d)?"-100px":"0"));}
	}
	for(var i=0;i<r.length;i++){
	if(r[i].type=="radio"||r[i].type=="checkbox"){
		if(r[i].parentNode.tagName=='SPAN'){
		r[i].style.opacity=0;r[i].style.filter="alpha(opacity=0)";
		r[i].parentNode.style.cssText='background:url(//ku.shouce.ren/files/images/201601/56a36dfe277b9.gif) no-repeat;display:inline-block;width:16px;height:16px;vertical-align:top;';
		}
		r[i].onclick=function(){select_element(this);unfocus();}
		select_element(r[i]);
		}
	}	
	function unfocus(){for(var i=0;i<r.length;i++){if(r[i].type=="radio"||r[i].type=="checkbox"){select_element(r[i]);}}}
}
}
addLoadEvent(LoadCheckBox);
</script>
<span><input type="radio" value="1" name="rtest" id="rtest1" /></span><label for="rtest1">ASP</label>
<span><input type="radio" value="2" name="rtest" id="rtest2" disabled="disabled" checked="checked" /></span><label for="rtest2">PHP</label>
<hr />
<span><input type="checkbox" value="1" name="test" id="test1" /></span><label for="test1">ASP</label>
<span><input type="checkbox" value="2" name="test" id="test2" disabled="disabled" checked="checked" /></span><label for="test2">PHP</label>
<hr />
<input type="checkbox" value="1" name="asfd2" id="asdf" /><label for="asdf">ASP</label>
<input type="radio" value="1" name="rtest2" id="qwer" /></span><label for="qwer">PHP</label>
</fieldset>

AخA
 
<title>用图片代替表单的单选、复选按钮</title>
<style type="text/css">
fieldset {
margin:5px;
padding:0 12px 12px 12px;
border:1px solid #D4D4D4;
}
legend {
    font-weight:bold;
}
</style>
<script language="javascript" type="text/javascript">
function getid(id){return document.getElementById(id);}
function gettag(tag,obj){if(obj){return obj.getElementsByTagName(tag)}else{return document.getElementsByTagName(tag)}}
function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!="function"){window.onload=func;}else{window.onload=function(){oldonload();func();}};}

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

用图片代替表单的单选、复选按钮

分类

网站常用

描述

用图片代替传统的单选框及复选框，经过测试，兼容IE6、IE7、IE8和FF3.5，其它版本或其它浏览器未测试。复选框和单选框调用的是一张背景图片，如果没看到效果请刷新页面或等待一会。 <br>　　