表單控件是咱們的重中之重,由於一旦牽扯到數據交互,離不開form表單的使用,好比用戶的註冊登陸功能等javascript
那麼經過上節知識點咱們瞭解到,咱們在使用jquery方法操做表單控件的方法:html
$(selector).val()//設置值和獲取值
看以下HTML結構:java
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""> <input type="radio" name="sex" value="112" />男 <!-- 設置cheked屬性表示選中當前選項 --> <input type="radio" name="sex" value="11" checked="" />女 <input type="radio" name="sex" value="11" />gay <input type="checkbox" value="a" checked=""/>吃飯 <input type="checkbox" value="b" />睡覺 <input type="checkbox" value="c" 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="111" /> </form> </body> </html>
頁面展現效果:jquery
操做表單控件代碼以下:spa
<script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 1、獲取值 //1.獲取單選框被選中的value值 console.log($('input[type=radio]:checked').val()) //2.複選框被選中的value,獲取的是第一個被選中的值 console.log($('input[type=checkbox]:checked').val()) //3.下拉列表被選中的值 var obj = $("#timespan option:selected"); // 獲取被選中的值 var time = obj.val(); console.log(time); // 獲取文本 var time_text = obj.text(); console.log("val:"+time+" text"+ time_text ); //4.獲取文本框的value值 console.log($("input[type=text]").val())//獲取文本框中的值 // 二.設置值 //1.設置單選按鈕和多選按鈕被選中項 $('input[type=radio]').val(['112']); $('input[type=checkbox]').val(['a','b']); //2.設置下拉列表框的選中值,必須使用select /*由於option只能設置單個值,當給select標籤設置multiple。 那麼咱們設置多個值,就沒有辦法了,可是使用select設置單個值和多個值均可以 */ $('select').val(['3','2']) //3.設置文本框的value值 $('input[type=text]').val('試試就試試') }) </script>