<!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>
使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理的相关教程结束。
