標籤：bar javascrip 屬性 資料 文本 form 技術 知識點 ted
表單控制項是我們的重中之重，因為一旦牽扯到資料互動，離不開form表單的使用，比如使用者的註冊登入功能等
那麼通過上節知識點我們瞭解到，我們在使用jquery方法動作表單控制項的方法：
$(selector).val()//設定值和擷取值
看如下HTML結構：
<!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>
頁面展示效果：
動作表單控制項代碼如下：
<script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 一、擷取值 //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>
前端 ----jQuery動作表單
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
