<!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>