使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理...

最新推荐文章于 2022-03-29 23:37:05 发布

weixin_30399055

最新推荐文章于 2022-03-29 23:37:05 发布

阅读量187

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liuyanmin/p/5146547.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(function (){
		$(":text").blur(function (){
			var content = $("#address").val()
			content = $.trim(content);
			if(content == ""){
				this.value = this.defaultValue;		//defaultValue:是DOM中，text的默认属性值
			}
		});
		//使单选下拉框的选择3号被选中
		$(":button:eq(1)").click(function (){
			$("#sigal").val("选择3号");
		});
		//使多选下拉框选中的选择2号和选择4号被选中
		$(":button:eq(2)").click(function (){
			$("#multiple").val(["选择2号","选择4号"]);
		});
		//使多选框的多选2和多选4被选中
		$(":button:eq(3)").click(function (){
			$(":checkbox[name='c']").val(["check2","check4"]);
		});
		//使单选框的单选2被选中
		$(":button:eq(4)").click(function (){
			$(":radio[name='r']").val(["radio2"]);
		});
		
		$(":button:eq(5)").click(function (){
			alert($("#sigal").val());
			alert($("#multiple").val());
			//注意：此处有多个值时需要对其进行循环遍历，否则只能输出被选中的第一个值
			$(":checkbox[name='c']:checked").each(function (){
				alert($(this).val());
			});
			//radio可以不用遍历直接输出，因为被选中的只能有一个
			//而且，在选取元素的时候不要忘记加  :checked,表示备选中的
			alert($(":radio[name='r']:checked").val());
		});
		
	});
</script>
</head>
<body>
	<input type="text" id="address" placeholder="请输入邮箱地址" /><br/>
	<input type="text" name="password" placeholder="请输入邮箱密码" /><br/>
	<input type="button" value="登录" /><br/><br/><br/>
	
	<input type="button" value="使单选下拉框的选择3号被选中" />
	<input type="button" value="使多选下拉框选中的选择2号和选择4号被选中" /><br/>
	<input type="button" value="使多选框的多选2和多选4被选中" />
	<input type="button" value="使单选框的单选2被选中" /><br/>
	<input type="button" value="打印已经被选中的值" /><br/><br/>
	
	<select id="sigal">
		<option>选择1号</option>
		<option>选择2号</option>
		<option>选择3号</option>
	</select>
	
	<select id="multiple" multiple="multiple">
		<option>选择1号</option>
		<option>选择2号</option>
		<option>选择3号</option>
		<option>选择4号</option>
	</select><br/><br/>
	
	<input type="checkbox" name="c" value="check1" />多选1
	<input type="checkbox" name="c" value="check2" />多选2
	<input type="checkbox" name="c" value="check3" />多选3
	<input type="checkbox" name="c" value="check4" />多选4<br/><br/>
	
	<input type="radio" name="r" value="radio1" />单选1
	<input type="radio" name="r" value="radio2" />单选2
	<input type="radio" name="r" value="radio3" />单选3
</body>
</html>

转载于:https://www.cnblogs.com/liuyanmin/p/5146547.html