05-使用jQuery操作input的value值

表单控件是我们的重中之重 , 因为一旦牵扯到数据交互, 离不开form 表单的使用 , 比如用户的注册登录功能等 ,

$(selector).val()  //  设置值和获取值

select　 标签是下拉列表  

后面跟  option

看如下HTML结构 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<from action="">
    <input type="radio" name="sex" value="112"/>男
    <!--设置checked属性表示选中当前选项-->
    <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="timeespan" 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"/>
    
    
    
</from>
</body>
</html>

页面展示效果：

 

 

 

 

 

操作表单控件代码如下：

<script type="text/javascript" src="jquery.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+" 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>

 

posted @ 2018-10-02 22:24  heshun  阅读(171)  评论(0)    收藏  举报