提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

点击复选框变换图片

图片 点击 变换 复选框
2023-09-14 09:04:06 时间 
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点击更换复选框样式</title>
		<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
		<style>
			.box1 {
				width: 30px;
				height: 30px;
				position: relative;
				top: 10px;
				left: 35%;
			}

			.box1 input {
				width: 39px;
				height: 39px;
				position: relative;
				z-index: 6;
				opacity: 0;
			}

			.box2 {
				width: 38px;
				height: 38px;
				position: absolute;
				z-index: 5;
				top: 3px;
				left: 4px;
			}

			.box2 img {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			    <input type="checkbox">
			    <div class="box2">
				       
				<!--- 复选框未选中时，自定义的图片 -->
				  <img src="http://dev.ixincheng.com/xcview/images/agrees.png" />
			</div>
		</div>
		<script>
			$('input[type="checkbox"]').click(function() {
				if (this.checked) {
					$(this).siblings('.box2').find('img').attr('src',
						'http://dev.ixincheng.com/xcview/images/agree.png');
				} else {
					$(this).siblings('.box2').find('img').attr('src',
						'http://dev.ixincheng.com/xcview/images/agrees.png');
				}
			});
		</script>


	</body>
</html>

相关文章