表单控件是我们的重中之重，因为一旦牵扯到数据交互，离不开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>

05-使用jQuery操作input的value值的更多相关文章

  1. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  2. 使用jQuery操作input的value值

    表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用jquery方法操作表单控件的方法: $(selector ...

  3. jQuery系列（五）：jQuery操作input的value值

    表单控件是重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等. jQuery操作表单控件的方法: $(selector).val()//设置值和获取值 1.实例代码 ...

  4. jQuery 操作 input 之 checkbox

    jQuery 操作 input 之 checkbox 一片 HTML 清单: <input type="checkbox" name="hobby" va ...

  5. jQuery操作input改变value属性值

    今天写了一个表单元素,在用户点击的时候会清空input中的内容,当鼠标点击其他地方的时候会把输入的值保存为input的value值 类似于这样的效果 当用户点击的时候文字消失. html代码 < ...

  6. JQuery 操作对象的属性值

    通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...

  7. Jquery获取input=text 的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery操作input值总结

    获取选中的值获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本var item = $ ...

  9. JQuery 操作input

    获取选中的值 获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item ...

随机推荐

  1. python基础之数字、字符串、列表、元组、字典

    Python基础二: 1.运算符: 判断某个东西是否在某个东西里面包含: in  为真 not in  为假 (1).算术运算符: 运算符 描述 实例 + 加  表示两个对象相加 a + b输出结果3 ...

  2. android 开发 View _16 自定义计步器View、自定义柱状图View

    /** *@content:实现计步的环形View *@time:2018-7-30 *@build: */ public class CountStepsAnnularView extends Vi ...

  3. VS2015密匙--VS2015打开丢失msvcp140.dll--cannot find one or more components ,please reinstall the application

    win7旗舰版 64位 + vs2015 专业版 1.安装VS2015过程中可能需要用到的VS2015专业版钥匙:(测试,可用) HMGNV-WCYXV-X7G9W-YCX63-B98R2 2.VS2 ...

  4. vsCode关闭代码检查工具

    在script标签里,第一行输入下面的内容即可:

  5. Linux网络编程学习(六) ----- 管道(第四章)

    1.管道的定义 管道就是将一个程序的输出和另外一个程序的输入连接起来的单向通道,比如命令: ls -l|more,就建立了一个管道,获取ls -l的输出作为more的输入,数据就沿着管道从管道的左边流 ...

  6. c++之__attribute__((unused))

    转自https://blog.csdn.net/u013083059/article/details/19342935 内核时注意到有些函数会有添加__attribute__((unused)), 在 ...

  7. SSM商城项目（六）

    1.学习计划 1.Redis服务器搭建 2.Redis持久化 3.Redis集群搭建 4.Jedis 5.Solr服务器安装 2.Redis的安装 2.1. Redis的安装 Redis是c语言开发的 ...

  8. 数据导入Excel时，出现ole error 800AC472这个错误，怎么解决。

    我也出现过这个问题 在生成报表的时候不要动EXCEL中的任何单元格 让它完成保存就可以了 或者是把office 2003 删除下载一个office 2000就可以解决 据说是版本兼容的问题 不是高手 ...

  9. ucore-lab1-练习5report

    实验5--实现函数调用堆栈跟踪函数 需要完成kdebug.c中函数print_stackframe的实现,可以通过函数print_stackframe来跟踪函数调用堆栈中记录的返回地址. 一．函数堆栈 ...

  10. uvm_pre_do

    https://blog.csdn.net/tingtang13/article/details/46535649 1.uvm_do 封装了一系列接口,封装越多,灵活性越差.所以增加了三个接口:pre ...