清单地址的重用

最新推荐文章于 2024-04-24 12:25:25 发布

编程之上

最新推荐文章于 2024-04-24 12:25:25 发布

阅读量962

点赞数

分类专栏： jquery 文章标签： jquery checkbox

本文链接：https://blog.csdn.net/ruizhengyun/article/details/27545811

版权

jquery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>list</title>
	<style>
	*{margin:0; padding:0;}
	body{font-size: 12px; background-color: #fff; text-align:center;}
	input[type=text]{border:1px solid #ccc; height: 24px; line-height: 24px;}
	input[type=checkbox]{vertical-align: middle;}
	.f-wrap{width: 1000px; text-align: left; margin:0 auto; }
	h3{line-height: 30px;}
	form{padding:0 10px; }
	div{padding:5px 0;}
	</style>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script>
	$(document).ready(function(){
		$.fn.setReadOnly = function(readOnly){
			return this.filter('input:text')
						.attr('readOnly',readOnly)
						.css('opacity',readOnly ? 0.5 : 1.0 );
		}

		$('#address').find('legend').each(function(){
			$(this).replaceWith('<h3>' + $(this).text() + '</h3>');
		}).end()
			.on('click','#sameAddress',function(){
			var same = this.checked;
			if(same){
				$('#billAddress').val(same ? $('#shopAddress').val() : '');
				$('#billCity').val(same ? $('#shopCity').val() : '');
				$('#billState').val(same ? $('#shopState').val() : '');
				$('#billZip').val(same ? $('#shopZip').val() : '');
				$('#billingAddress input:text').setReadOnly(same);
				same = !same;
			}else{
				$('#billAddress').val(same ? $('#shopAddress').val() : '');
				$('#billCity').val(same ? $('#shopCity').val() : '');
				$('#billState').val(same ? $('#shopState').val() : '');
				$('#billZip').val(same ? $('#shopZip').val() : '');
				$('#billingAddress input:text').setReadOnly(same);
			}
		});
	});
	</script>
</head>
<body>
	<div class="f-wrap">
		<fieldset id="address">
			<legend>The test form</legend>
			<form action="" name="testForm">
				<div><label for="">First Name:</label><input type="text" name="firstName" id="firstName"></div>
				<div><label for="">Last Name:</label><input type="text" name="lastName" id="lastName"></div>
				<div id="shoppingAddress">
					<h2>shopping address</h2>
					<div><label for="">Street address:</label><input type="text" name="shopAddress" id="shopAddress"></div>
					<div>
						<label for="">City, State, Zip:</label>
						<input type="text" name="shopCity" id="shopCity">
						<input type="text" name="shopState" id="shopState">
						<input type="text" name="shopZip" id="shopZip">
					</div>
				</div>
				<div id="billingAddress">
					<h2>billing address</h2>
					<div>
						<input type="checkbox" id="sameAddress">
						Billing address is same as shopping address
					</div>
					<div><label for="">Street address:</label><input type="text" name="billAddress" id="billAddress"></div>
					<div>
						<label for="">City, State, Zip:</label>
						<input type="text" name="billCity" id="billCity">
						<input type="text" name="billState" id="billState">
						<input type="text" name="billZip" id="billZip">
					</div>
				</div>
			</form>
		</fieldset>
	</div>
</body>
</html>

编程之上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清单地址的重用

list *{margin:0; padding:0;} body{font-size: 12px; background-color: #fff; text-align:center;} .f-wrap{width: 1000px; text-align: left; margin:0 auto; } h3{line-height: 30px;} form{padding:0 10
复制链接

扫一扫