使用jQuery操做input的value值

表單控件是jQuery的重中之重，由於一旦牽扯到數據交互，就離不開form表單的使用，好比用戶的登陸註冊功能等。<br> 在進行操做input的value值的時候，主要使用jQuery的val()方法。<br> <a href="https://www.cnblogs.com/yang-wei/p/9508539.html">點擊查看val()的使用方法</a><br> 看以下代碼：javascript

<!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、獲取值
            //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())

        // 2、設置值
            //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>