zoukankan      html  css  js  c++  java
  • 使用jQuery操作input的value值

    表单控件是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>
    
  • 相关阅读:
    luoguP1160 队列安排 x
    luoguP3366 【模板】最小生成树 x
    cogs服务点设置(不凶,超乖) x
    codevs3269 混合背包 x
    [kuangbin带你飞]专题一 简单搜索 x
    [SWUST1744] 方格取数问题(最大流,最大独立集)
    [SWUST1738] 最小路径覆盖问题(最大流,最小路径覆盖)
    [SWUST1742] 试题库问题(最大流)
    [HDOJ5676]ztr loves lucky numbers(状压枚举,打表,二分)
    [swustoj1739] 魔术球问题 (最大流,最小路径覆盖)
  • 原文地址:https://www.cnblogs.com/yang-wei/p/9534521.html
Copyright © 2011-2022 走看看