checkbox 之内容一致与只读状态

最新推荐文章于 2022-07-14 14:30:40 发布

编程之上

最新推荐文章于 2022-07-14 14:30:40 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/ruizhengyun/article/details/45039743

jquery 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种改进用户交互的方法，通过在表单中加入复选框，实现账单地址自动与送货地址同步的功能，显著提高了用户体验。详细解释了如何使用HTML、JavaScript和jQuery实现这一功能，包括表单元素的动态绑定和状态改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求分析如下:

用户输入两组用户信息：一组是送货目的地，另一组是账单组目的地。在大多数情况下，这两个地址是一致的。让用户重复输入两次相同的信息会导致用户友好度降低，而这非

我们所想。

通过给账单地址添加复选框，意在指示账单地址是否与送货地址一致。如果选中复选框，就从送货地址复制账单地址并且设为只读状态；如果取消选中复选框，就从文本字段里

清空账单地址和只读状态。

<fieldset>
	<legend>The Test form</legend>
	<div>
		<form name="testForm" action="">
			<div>
				<label>First name:</label>
				<input type="text" name="firstname" id="firstname" />
			</div>
			<div>
				<label> Last name:</label>
				<input type="text" name="lastname" id="lastname" />
			</div>
			<div id="shopingAddress">
				<h2>Shop address</h2>
				<div>
					<label>  Stress address:</label>
					<input type="text" name="shopAddress" id="shopAddress" />
				</div>
				<div>
					<label>  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>Bill address</h2>
				<div>
					  <input type="checkbox" id="sameAddressControl" /></label><label for="sameAddressControl">Billing address is same as shop address.</label>
				</div>
				<div>
					<label>  Stress address:</label>
					<input type="text" name="billAddress" id="billAddress" />
				</div>
				<div>
					<label>  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>
	</div>
</fieldset>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function($){
	$.fn.setReadonly = function(readonly){
		return this.filter('input:text')
			.attr('readonly',readonly)
			.css({'opacity':readonly ? 0.5 : 1.0});
	};
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
	$('#sameAddressControl').click(function(){
		var same = this.checked;
		$('#billAddress').val(same?$('#shopAddress').val():'');
		$('#billCity').val(same?$('#shopCity').val():'');
		$('#billState').val(same?$('#shopState').val():'');
		$('#billZip').val(same?$('#shopZip').val():'');
		$('#billingAddress input').setReadonly(same);
	});
});
</script>