个性化的复选框美化效果，让图片代替复选框效果_表单及按钮

个性化的复选框美化效果，让图片代替复选框效果: 发布时间：2020-06-30编辑：脚本学堂

个性化的复选框美化效果，让图片代替复选框效果，提交按钮也使用了图片。span_hover对应hover时右上角白底图标，span.checked&&a.on对应选中时候的样式，选中应当取消hover事件。

<!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>挺个性的<a href=http://www.jb200.com/zt/fuxuankuang/ target=_blank class=infotextkey>复选框</a>美化效果</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.<a href=http://www.jb200.com/zt/checked/ target=_blank class=infotextkey>checked</a>{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/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>-1.6.2.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="<a href=http://www.jb200.com/zt/checkbox/ target=_blank class=infotextkey>checkbox</a>" name="qes[]" value="1" style="display:none" id="chek_img_1">
			<img id="img_1" class="on" src="/source/images/201207/btn-01.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="/source/images/201207/btn-02.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="/source/images/201207/btn-03.jpg"><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="/source/images/201207/btn-04.jpg" type="image" name="yt0" value="submit"></a>
			</div>
			<br clear="all">
		</div>
		<div style="height:76px;<a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>:76px;padding-left:5px;font-size:16px;color:red;"> <span id="Msgtips" style="display:none;">请至少选择一项</span></div>
	</form>
</div>
</body>
</html>

提示：可修改代码后再运行!

上一篇：JS实现的Button按钮变色
下一篇：返回列表

与个性化的复选框美化效果，让图片代替复选框效果有关的文章

本文标题：个性化的复选框美化效果，让图片代替复选框效果
本页链接：http://www.jb200.com/tx/166.html

浏览排行

栏目分类

热点文章

个性化的复选框美化效果，让图片代替复选框效果