挺个性的复选框美化效果

小提示

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代码

复制格式化注释注释清空

放大

<!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>
<title>挺个性的复选框美化效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
/* Reset */
body{margin:0;padding:0;font:14px/1.5 microsoft yahei,Arial,tahoma,Srial,helvetica,sans-serif;background:#f5f6f7;}
ul,ol,li,dl,dt,dd{list-style:none;margin:0;padding:0;}
a{text-decoration:none;color:#333;outline:none;}
a:hover{text-decoration:none;color:#F40;outline:none;}
img{border:0px;}
.sicklist:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.sicklist{zoom:1;}
/* sickmain */
#sickmain{width:960px;margin:0 auto;padding-bottom:30px;border-bottom:1px dashed #ccc;}
.user{margin-top:30px;border-bottom:1px dashed #ccc;padding-bottom:30px;overflow:hidden;}
.user img{float:left;width:50px;height:50px;padding:4px;border:1px solid #ccc;background:#fff;}
.user p{margin:0 0 0 70px;}
.user p b{color:#ef5a08;}
.user-info{padding-top:5px;font-size:16px;}
.user-info2{font-size:18px;font-weight:bold;}
.test{width:244px;height:76px;margin:0 auto;}
.sicklist{width:1010px;margin:0 0 0 -20px;padding:0 0 50px 0;}
.sicklist li{width:306px;height:306px;float:left;margin:25px 0 0 25px;overflow:hidden;position:relative;_margin-left:15px;cursor:pointer;}
.sicklist a{display:inline-block;width:299px;height:299px;}
.sicklist a img{vertical-align:top;width:305px;height:305px;}
/* hover状态 */
.sicklist .check{background:url();width:50px;height:50px;display:inline-block;position:absolute;top:0;right:4px;z-index:999;}
/* click状态 */
.sicklist li span.checked{width:299px;height:296px;border:3px solid #ff7713;display:block;position:absolute;background:url() 249px 0 no-repeat;top:0;right:1px;z-index:999;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#testform').submit(function(){
		if($('input:checked').size()<=0){
			$('#Msgtips').show();
			//setTimeout(function(){$('#Msgtips').hide('false');},3000);
			return false;
		}
	});
	$('img.on').click(function(){
		var tid = $(this).attr('id');
		var checked = false;
		if ($('#chek_'+tid).attr('checked') && $('#chek_'+tid).attr('checked') != 'false') {
			checked = true;
		}
		$('#chek_'+tid).attr('checked',!checked);
		$('#span_'+tid).attr('class',checked ? '' : 'checked');
		if($('input:checked').size()<=0){
			$('#Msgtips').show();
		}else{
			$('#Msgtips').hide();
		}
	});
	$('ul.sicklist').find('span').click(function(){
		$('#chek_'+$(this).parents('li').find('img').attr('id')).attr('checked',false);
		if($(this).attr('class') == 'checked'){
			$(this).attr('class','');
		}
	});      
	$('img.on').hover(function(){
		var tid = $(this).attr('id');
		if($('#span_'+tid).attr('class')==''){
			$('#span_'+tid).attr('class','check');
		}
	},function(){
		var tid = $(this).attr('id');
		if($('#span_'+tid).attr('class')=='check'){
			$('#span_'+tid).attr('class','');
		}
	});
	var img = new Image;
	var imgurl = $('#user_headerurl').val();
	var aobj = $('div.user');
	if(imgurl !=''){
		img.src = imgurl;
		if(img.complete){
			imageloaded(img,aobj);
			return;
		}
		img.onload=function(){
			imageloaded(img,aobj);
		}
	}
})
function imageloaded(img,obj){
	obj.find('img').remove();
	obj.find('a').append(img);
}
</script>
</head>
<body>

<div id="sickmain">
    <form id="testform" action="" method="post">
		<ul class="sicklist">
			<li>
			<input type="checkbox" name="qes[]" value="1" style="display:none" id="chek_img_1">
			<img id="img_1" class="on" src="//ku.shouce.ren/files/images/201601/56a36643b57b8.jpg"><span class="" id="span_img_1"></span>
            </li>
			<li>
			<input type="checkbox" name="qes[]" value="2" style="display:none" id="chek_img_2">
			<img id="img_2" class="on" src="//ku.shouce.ren/files/images/201601/56a36644ef65a.jpg"><span class="" id="span_img_2"></span>
            </li>
            <li>
			<input type="checkbox" name="qes[]" value="3" style="display:none" id="chek_img_3">
			<img id="img_3" class="on" src=""><span class="" id="span_img_3"></span>
            </li>
            </ul>
		<div style="height:76px;width:600px;float:left;">
			<div class="test" style="float:right;">
				<a href="javascript:void(0);"><input src="//ku.shouce.ren/files/images/201601/56a366474a2c4.jpg" type="image" name="yt0" value="submit"></a>
			</div>
			<br clear="all">
		</div>
		<div style="height:76px;line-height:76px;padding-left:5px;font-size:16px;color:red;"> <span id="Msgtips" style="display:none;">请至少选择一项</span></div>
	</form>
</div>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

挺个性的复选框美化效果

分类

表单按钮

描述

挺个性的复选框美化效果，让图片代替复选框效果，给人不一样的感觉，提交按钮也制作成了图片，更加漂亮了。span_hover对应hover时右上角白底图标，span.checked&&a.on对应选中时候的样式，选中应当取消hover事件。