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

jQuery系列（五）：jQuery操作input的value值的更多相关文章

  1. jquery系列教程3-DOM操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

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

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

  3. 从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. jQuery系列：DOM操作

    1. 访问元素 在访问页面时,需要与页面中的元素进行交互式的操作.在操作中,元素的访问主要包括对元素属性.内容.值.CSS的操作. 1.1 元素属性操作 1.1.1 设置或返回被选元素的属性值 语法格 ...

  5. 05-使用jQuery操作input的value值

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

  6. 使用jQuery操作input的value值

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

  7. jquery 学习(五) - CSS 操作

    HTML + CSS 样式 /*CSS样式*/<style> body{ margin: 0; } div{ width: 100%; height: 2000px; background ...

  8. Jquery系列:textarea常用操作

    1.textarea内容的读取与设置 读textarea文本值可以用name和id.而写入文本值只能用id. <textarea name="content" id=&quo ...

  9. JQuery实现获取多个input输入框的值，并存放在一个数组中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. python之并发编程（概念篇）

    一.进程 1.什么是进程 进程是正在进行的一个过程或者一个任务.而负责执行任务的则是cpu. 2.进程与程序的区别 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程 ...

  2. Python实现八大排序（基数排序、归并排序、堆排序、简单选择排序、直接插入排序、希尔排序、快速排序、冒泡排序）

    目录 八大排序 基数排序 归并排序 堆排序 简单选择排序 直接插入排序 希尔排序 快速排序 冒泡排序 时间测试 八大排序 大概了解了一下八大排序,发现排序方法的难易程度相差很多,相应的,他们计算同一列 ...

  3. -bash: /usr/librxec/grepconf.sh:Nosuch file or directory

    最近修改/etc/profile文件时,不小心在后面添加了source /etc/profile,导致使用xshell登录远程linux的时候出现下面的信息, 一直无法进入linux,将profile ...

  4. Java生成随机数列表

    生成随机数列表 1.Java8以前 (1)Math.random private List<UserEntity> random1() { ArrayList<UserEntity& ...

  5. winfrom 保存图片

    private void btnSave_Click(object sender, EventArgs e) { SaveFileDialog sfd = new SaveFileDialog(); ...

  6. python+vsCode 环境搭建

    先安装python环境和vscode Python下载链接:https://www.python.org/vscode下载地址:https://code.visualstudio.com/ 安装这两个 ...

  7. 怎么处理sqlserver2017部署在winowsDocker上时区无法修改成功的方式，并且可以多创建新的容器调用简单的方式直接使用！

    在创建该容器的时候我们执行的语句中添加了一个 从图中所看到的内容,上海时区,按照正常流程一般都是可疑正常执行的,但最后事情并不是我们所想的那么简单. 我们进入对应的容器里面 ,执行语句之后查找对应的文 ...

  8. Vue中断axios请求-切换页面+重复请求

    切换页面时中断 一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能, ...

  9. 关于页面数据未保存改变路由（beforeunload，beforeRouteLeave）

    一下内容为笔者个人理解,如有出入还请大佬指出不胜感激 页面有数据未保存,用户离开页面分为两种 1 . 直接关闭浏览器标签 或者点击浏览器后退按钮 离开当前页面 2. 在页面内改变路由,或则刷新页面(不 ...

  10. DS1302时钟

    采用串行数据传送方式,SPI 3线接口 SPI总线 SPI接口是以主从方式工作的,通常有一个主器件和一个或多个从器件 MOSI – 主器件数据输出,从器件数据输入 MISO – 主器件数据输入,从器件 ...