05-使用jQuery操作input的value值

 

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

那么通过上节知识点我们了解到，我们在使用jquery方法操作表单控件的方法：

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

看如下HTML结构：

<!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>

</body>

</html>

页面展示效果：

操作表单控件代码如下：

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

前端 ----jQuery操作表单的更多相关文章

  1. 第六章 jQuery操作表单

    1.单行文本框的应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  2. JQuery操作表单控件

    1.jquery操作radio <html> <head>   <script type="text/javascript" src="jq ...

  3. jquery 第五章 jQuery操作表单与表格

    1.回顾 对象.bind("事件名称",function(){ // }) 阻止冒泡事件 return false,   event stopProapagation() 模拟事件 ...

  4. JQuery操作表单相关使用总结

    select下拉列表onChange事件之JQuery实现: JQuery: $(document).ready(function () { $("#selectMenu").bi ...

  5. jquery 操作表单的问题

    下拉框获取选中项的值: $("#ID").find("option:selected").val(); 设置下拉框选中项: $("#ID") ...

  6. JQuery：各种操作表单元素方法小结

    来源:http://www.ido321.com/1220.html 表单元素无处不在,已然成了Web应用不可或缺的一个部分.对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值.那在JQu ...

  7. JQuery中操作表单和表格

    一:表单应用 1.HTML中的表单大致由三部分组成 (1).表单便签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...

  8. jQuery使用（三）：DOM操作之val()方法操作表单元素value值

    操作表单元素属性value的值 <form action="./" method='GET'> <h3 >选择你喜欢的明星</h3> <s ...

  9. 基于JQuery的前端form表单操作

    Jquery的前端表单操作:     jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...

随机推荐

  1. nohup命令执行退出后进程退出

    nohup命令常常用于让进程在后台执行.但是如果仅仅是执行: nohup command & 之后直接关闭终端的话,会发现之前已经启动进程也会退出.解决办法:nohup command &am ...

  2. ****** 五十 ******、软设笔记【UML分析和意义】-类图、对象图、状态图、活动图、顺序图、协作图、构件图、部署图，动静态模式

    一.类图(Class Diagram) 描述一组类.接口.协作已经它们之间的图,用来显示系统中各个类的静态结构图. 类之间的关系(relationship) *依赖(dependency) *泛化(g ...

  3. mybatis的两个核心对象SqlSessionFactory和SqlSession对象

    mybatis的两个核心对象SqlSessionFactory和SqlSession对象 参见:https://www.cnblogs.com/wxdestiny/p/9743686.html

  4. luogu P3233 [HNOI2014]世界树

    传送门 我是什么时候写的这题的qwq 首先,发现关键点的总数被限制了,很自然想到虚树,并且,对于一个关键点,他管理的点显然是一个联通块 然后把虚树先建出来,然后两次dfs,第一次是向祖先更新离每个点最 ...

  5. 简单的复用accep

    s = socket.socket() adress = ("192.168.15.102", 9999) s.bind(adress) s.listen() s.setblock ...

  6. day 10 - 2 函数练习

    1.写函数 接收 n 个数字  求这些参数数字的和 def sum_func(*args): total = 0 for i in args: total += i return total prin ...

  7. A - Arcade Game Gym - 100814A （概率思维题）

    题目链接:https://cn.vjudge.net/contest/285964#problem/A 题目大意:每一次给你你一个数,然后对于每一次操作,可以将当前的数的每一位互换,如果互换后的数小于 ...

  8. MGR架构~高可用架构细节的梳理

    一 简介:今天咱们来聊聊mgr的细节原理相关 二 选择新主机制   1 当主节点宕掉,自动会根据服务器的server_uuid变量和group_replication_member_weight变量值 ...

  9. mongodb系列~ mongodb慢语句(1)

    1 简介:讲讲mongo的慢日志2 慢日志类型    query insert update delete 3 查看慢日志  1 db.system.profile.find() 慢日志总揽  2 d ...

  10. 《Java编程思想第四版》附录 C Java 编程规则

    附录 C Java 编程规则 本附录包含了大量有用的建议,帮助大家进行低级程序设计,并提供了代码编写的一般性指导: (1) 类名首字母应该大写.字段.方法以及对象(句柄)的首字母应小写.对于所有标识符 ...