• jQuery系列(五):jQuery操作input的value值


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

    jQuery操作表单控件的方法:

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

    1、实例代码

    <!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>
    
    
    <script type="text/javascript" src="../jquery-3.3.1.min.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.下拉列表被选中的值
            let obj = $("#timespan option:selected");
            // 获取被选中的值
            let time = obj.val();
            console.log(time);
            // 获取文本
            let 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>
    </body>
    </html>
  • 相关阅读:
    静态页面复习--网格嵌套练习
    静态页面复习--用semantic UI写苹果官网
    静态页面复习--用网格写一个landing page
    静态页面复习--用semantic UI画美国队长盾牌
    静态页面复习--semantic UI搭建简单博客页面
    SQL脚本--总耗CPU最多的前个SQL --平均耗CPU最多的前个SQL
    C#中基于GDI+(Graphics)图像处理系列
    MVC Action 返回类型
    Axure RP 7 8
    MVC object htmlAttributes,IDictionary<string, object> htmlAttributes 写法
  • 原文地址:https://www.cnblogs.com/felixwang2/p/9877179.html
Copyright © 2020-2023  润新知