jQuery獲取input標籤的值(text,radio,checkbox)
阿新 • • 發佈：2018-12-12
這段時間,剛剛學習了jQuery.就想著寫一個小demo總結一下.如何獲取input標籤的值.發現框架是真的好用.方便了很多.
//下面是獲取值的html介面程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用者註冊</title> <style> div{ margin:100px; font-size:24px; } div input{ font-size:24px; } </style> </head> <script src="jquery-2.1.1.min.js"></script> <script src="user.js"></script> <body> <div> <input type="text" placeholder="賬號" id="zh"/> <p/> <input type="radio" name="sex" value="0" />男 <input type="radio" name="sex" value="1" checked="checked"/>女 <p/> <input type="checkbox" name="hobby" value="swim" />swim <input type="checkbox" name="hobby" value="game" />game <input type="checkbox" name="hobby" value="video" />video <p/> <input type="button" id="submit" value="提交" /> <input type="button" id="look" value="檢視註冊使用者資訊" /> <div> </body> </html> <script> $("#submit").click(function(){ var zh = $("#zh").val(); var sex = $("[name='sex']:checked").val(); var hobbies = ""; //將hobby複選框的值 總和成 ,, 的形式 $("[name='hobby']:checked").each(function(index, element) { hobbies += $(this).val()+","; }); hobbies = hobbies.slice(0,-1); //用json傳值 var user = new User(zh,sex,hobbies); var jsonUser = JSON.stringify(user); console.log(jsonUser); localStorage.setItem("user",jsonUser); }); $("#look").click(function(){ window.location="使用者資訊.html"; }); </script>
下面是獲取值的介面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用者資訊</title> <style> div{ margin:100px; font-size:24px; } div input{ font-size:24px; } </style> </head> <script src="jquery-2.1.1.min.js"></script> <script src="user.js"></script> <body> <div> <input type="text" placeholder="賬號" id="zh"/> <p/> <input type="radio" name="sex" value="0" checked="checked"/>男 <input type="radio" name="sex" value="1" />女 <p/> <input type="checkbox" name="hobby" value="swim" />swim <input type="checkbox" name="hobby" value="game" />game <input type="checkbox" name="hobby" value="video" />video <p/> <input type="button" id="submit" value="修改" /> <div> </body> </html> <script> $(function(){ var jsonUser = localStorage.getItem("user"); var user = JSON.parse(jsonUser); var userClass = new User(); //當json中的key 與 定義類 User中的key (屬性名)相同時 賦值 for(var userKey in user){ for(var userClasskey in userClass){ if(userKey == userClasskey){ userClass[userClasskey]=user[userKey]; } } } $("#zh").val(userClass.getName()); $("[name='sex'][value="+userClass.getSex()+"]").attr("checked","checked"); var hobbies = userClass.getHobby().split(","); for(var i=0;i<hobbies.length;i++){ $("[name='hobby'][value="+hobbies[i]+"]").attr("checked","checked"); } }); </script>
上面寫js物件寫是為了學習,很多知識還不太熟悉.後續估計會改進一下...而那個巢狀迴圈,就是為了實踐一下,key的匹配.