用jQuery得到form表單裡面文字框、密碼框、單選框、下拉框、複選框的值
阿新 • • 發佈：2019-01-29
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通過jQuery獲取表單的值</title> <script type="text/javascript" src="jquery-3.2.0.min.js" ></script> <script> function sub(){ var uname=$("#userName").val(); var likes=[]; if(uname!=""){ $("#name").text("使用者名稱："+$("#userName").val());//val()是值，text()是文字 } if($("#userPwd").val()!=""){ $("#pwd").text("密碼："+$("#userPwd").val()); } $("#sex").text("性別："+$("input[type='radio']:checked").val()); $("#add").text("地址："+$("#selects option:selected").val()); $("input[type=checkbox]:checked").each(function(i){//得到checkbox選定的值並且遍歷 likes[i]=$(this).val();//把值賦給likes陣列 }); if(likes.length!=0){ $("#like").text("興趣愛好："+likes.join(","));//將陣列的每個元素連成字串 } } </script> </head> <body> <form> 使用者名稱：<input type="text" id="userName" /><br/> 密碼：<input type="password" id="userPwd" /><br /> 性別：<input type="radio" name="sexs" checked="checked" value="男"/>男<input type="radio"name="sexs" value="女"/>女<br /> 地址：<select id="selects"> <option value="長沙">長沙</option> <option value="益陽">益陽</option> <option value="郴州">郴州</option> </select><br/> 愛好：<input type="checkbox" name="box" value="擼啊擼"/>擼啊擼 <input type="checkbox" name="box" value="打籃球"/>打籃球 <input type="checkbox" name="box" value="打羽毛球"/>打羽毛球<br /> <input type="button" value="提交" onclick="sub()" /> </form> <div id="name"></div> <div id="pwd"></div> <div id="sex"></div> <div id="add"></div> <div id="like"></div> </body> </html>