05-使用jQuery操做input的value值

表單控件是咱們的重中之重,由於一旦牽扯到數據交互,離不開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>
相關文章
相關標籤/搜索