使用jQuery操作input的value值
阿新 • • 發佈：2018-08-25
form表單 單選按鈕 進行 選中值 sel 註冊功能 但是 復選框 我們
表單控件是jQuery的重中之重，因為一旦牽扯到數據交互，就離不開form表單的使用，比如用戶的登錄註冊功能等。
在進行操作input的value值的時候，主要使用jQuery的val()方法。
點擊查看val()的使用方法
看如下代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ //一、獲取值 //1.獲取單選框被選中的value值 console.log($("input[type=radio]:checked").val()); // 2.復選框被選中的value，獲取的是第一個被選中的值, 如果沒有值，將顯示on console.log($("input[type=checkbox]:checked").val()); //3.下拉列表被選中的值 var obj = $("#timespan option:selected") //獲取被選中的值 console.log(obj.val()); // 獲取文本 console.log(obj.text()) // 二、設置值 //1.設置單選按鈕和多選按鈕被選中項 $("input[type=radio]").val(["1"]); $("input[type=checkbox]").val(["sleep", "play"]); //2.設置下拉列表框的選中值，必須使用select //因為option只能設置單個值，當給select標簽設置multiple， 那麽我們設置多個值，就沒有辦法了。 //但是使用select設置單個值和多個值都可以。 $("selct").val(["2", "3"]); //3. 設置文本框的value值 $("input[type=text]").val("this is a test."); }) </script> </head> <body> <form action="javascript:void(0)"> <input type="radio" name="sex" value="1" />男 <!-- 設置checked屬性表示選中當前選項 --> <input type="radio" name="sex" value="0" checked=""/>女 <input type="checkbox" name="eat" value="eat" checked=""/>吃飯 <input type="checkbox" name="sleep" value="sleep"/>睡覺 <input type="checkbox" name="play" value="play" checked="" />打豆豆 <!-- 下拉列表 option標簽內設置selected屬性 表示選中當前 --> <select name="timespan" id="timespan" class="Wdate"> <option value="1">8:00-8:30</option> <option value="2" selected="">8:30-9:00</option> <option value="3">9:00-9:30</option> </select> <input type="text" name="" id="" value="請輸入"> </form> </body> </html>
使用jQuery操作input的value值