使用jQuery操作input的value值

來源:互聯網
上載者:User

標籤:check   OLE   rip   jquer   www.   head   登入註冊   取值   select標籤   

表單控制項是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值

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.