使用jQuery操作input的value值

2023-11-16

表单控件是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>

转载于:https://www.cnblogs.com/yang-wei/p/9534521.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用jQuery操作input的value值 的相关文章

  • jQuery.getJSON:如何避免在每次刷新时请求 json 文件? (缓存)

    在此示例中 您可以看到生成的 HTML 列表 每次刷新时 脚本都会请求数据文件 ajax test json 并再次构建列表 生成的文件 ajax test json 被静态缓存 但是如何避免在每次刷新时请求此文件 source jquer
  • Javascript树遍历算法

    我需要帮助以深度优先的方式遍历树结构 我无法想出一个算法来正确地做到这一点 我的输入是这样的 A B C 1 2 a b c d 输出应采用以下形式 A 1 a A 1 b A 1 c A 1 d A 2 a A 2 b A 2 c A 2
  • Javascript 与 Python 关于 Python 'map()' 函数的比较

    Python中有一个函数叫做map这可以让你去 map someFunction x y z 并继续应用该功能的列表 是否有与此功能等效的 JavaScript 我现在刚刚学习Python 虽然我被告知javascript是函数式语言 但我
  • 检查用户是否连接到 Facebook,然后检查他是否喜欢某个页面

    有没有什么方法可以检查用户是否在我的外部页面上连接到 Facebook 而不让他们允许我的应用程序之一 同样的问题也适用于 检查用户是否喜欢某个页面 我检查了大约 20 个问题和 3 4 个教程 似乎所有问题都在讨论内部脚本 粉丝页面 应用
  • AngularJS 使用 $apply 而不使用 $scope

    我开始使用 AngularJS 并且接受了用它来编写控制器的约定 而不是用 scope 所以我的控制器看起来像这样 myApp controller SomeController function this myModel id 1 nam
  • 如何在光标下的所有元素上调用 mouseover?

    我有一个网络应用程序 每次单击时都会创建一个点 见下文 当我将鼠标悬停在一堆点上时 我希望光标下的每个点都会触发 mouseover 或 mouseenter 事件 然而 只有一个事件被触发 即堆栈 顶部 的点的事件 当鼠标移动到一堆多个点
  • 如何使用 LinkedIn javascript sdk 检索包括所有字段的职位列表?

    我想要获取 LinkedIn 会员在其个人资料中输入的每个职位的 ID 头衔 摘要 开始日期 结束日期 当前状态和公司名称 我测试了一个查询休息控制台 https apigee com console linkedin我得到了想要的结果 查
  • 如何使用 axios / jest 测试失败的请求

    我创建了一个非常小的应用程序 如果您传递硬币和数量 它可以计算为某些加密货币支付的总价格 我想测试错误 但我总是收到 收到的承诺已解决而不是被拒绝 我相信这是因为如果 url 错误 axios 仍然会解决承诺 我遇到的第二个问题是 我尝试测
  • 使用闭包和自调用函数制作计数器

    我想知道为什么这段代码不起作用 var uniqueInteger function var counter 0 return function return counter console log uniqueInteger 0 cons
  • 使用 NodeJS 让 Discord 机器人发送带有消息的图片

    我有几张照片 全部在 imgur 上 带有直接图像链接 格式 https i imgur com XXXXXX jpg https i imgur com XXXXXX jpg 以及用 NodeJS 制作的 Discord 机器人 我发送这
  • 为什么将数据存储为元素的属性存在风险?

    我一直在读同样的东西 直接在 DOM 元素上存储属性值是有风险的 因为可能会发生内存泄漏 但有人可以更详细地解释这些风险吗 按属性 我假设您指的是 DOM 元素上的属性 DOM 元素上的自定义属性安全吗
  • 向对象添加元素

    我需要填充一个 json 文件 现在我有这样的东西 element id 10 quantity 1 我需要添加另一个 元素 我的第一步是使用该 json 将该 json 放入对象类型中cart JSON parse 现在我需要添加新元素
  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好
  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3
  • 如何在 angularjs 中修剪()字符串?

    有角度特定的方法吗 如果没有 我应该使用内置的jquery 来做到这一点吗 如果我应该使用内置的jquery 如何在不使用 的情况下访问trim 函数 或者这是必要的 编辑 是的 我知道 str trim 对不起 我需要这个才能在 IE 8
  • Meteor.js 登录事件

    因此 我对 Meteor 框架和 JavaScript 总体来说还很陌生 但我正在使用该框架开发一个小项目 以尝试让自己达到标准 基本上我正在开发一个微博客网站 目前 用户可以通过多种服务登录 fb google 等 我通过插入所需 url
  • ThreeJS无法加载Json文件

    首先 我已经读过这个问题 https stackoverflow com questions 17201888 three js exporter export object not working with jsonloader r58没
  • Dojo/on 和捕获阶段

    有没有办法用 dojo on 在捕获阶段 而不是冒泡阶段 触发事件 我最终在这里寻找有关 on 的前身 dojo connect 的信息 就其价值而言 dojo connect 似乎不支持捕获阶段的事件侦听器 它的工作原理是将事件处理程序作
  • 在 Google Apps 脚本中的文本前插入换行符

    我需要在 Google 文档中的某些文本之前插入一些换行符 尝试过这种方法但出现错误 var body DocumentApp getActiveDocument getBody var pattern WORD 1 var found b
  • 获取淘汰赛中被点击元素的索引

    获取无序列表中单击元素的索引的最佳方法是什么 让我举个例子 假设我有以下 HTML 代码 ul li p p li ul 现在我有以下 javascript 代码来获取索引 self itemClicked function data it

随机推荐

  • 每日一练(三十七)

    文章目录 3 1 求字符串的子串个数 3 2 判断程序输出 3 3 strlen 实现 3 4 strcmp 实现 3 5 strcat 实现 每日一练合集 3 1 求字符串的子串个数 3 2 判断程序输出 3 3 strlen 实现 in
  • node.js中的url.parse方法详解

    parse 方法接受一个URL字符串 解析它 然后返回一个URL对象 如果urlString不是字符串 则抛出类型错误 如果存在auth属性但无法解码 则会抛出URIError 语法 url parse urlStr parseQueryS
  • 医生如何使用ChatGPT提高工作效率

    文章目录 引言 案例一 快速获取医学知识 案例二 协助患者自我诊断 案例三 辅助临床决策 案例四 提供在线咨询服务 案例五 用病人易于理解的语言总结关键的临床信息 案例六 高效整理医疗文件 案例七 根据患者的文化水平定制患教材料 案例八 面
  • Delaunay三角化实现原理

    一 概述 二 图形化解释 1 超级三角形插入第一个点 2 插入第二个点 3 插入第三个点 4 插入第四个点 5 插入第五个边 6 在超级三角形中移除具有极值的边 三 性质 四 代码 1 伪代码 2 C 实现 3 C 实现 参考 一 概述 本
  • React v4官方推荐的富文本编辑器braft-editor使用

    官方推荐使用两个编辑器其中一个 v5推荐另一个 以v4这个为例 由于官方文档都是class类组件 使用时不太方便 所以下面是自己写的一个hook函数组件 只实现了基本使用 特殊化的暂未写出 一 安装 使用npm安装 npm install
  • 解决element-plus提示组件样式丢失问题

    使用element plus的提示组件时样式不显示 import ElNotification from element plus ElNotification message err response data msg 请求失败 type
  • ObjectARX中使用非模态对话框的问题(写数据库导致AutoCAD异常问题、刷新显示)

    ObjectARX中使用非模态对话框遇到的两个问题及解决办法 一 写数据库导致AutoCAD异常问题 默认状态下AutoCAD2004是多文档应用程序 系统变量SDI 0 acdbHostApplicationServices gt wor
  • 为什么C++编译器不能支持对模板的分离式编译

    为什么C 编译器不能支持对模板的分离式编译 刘未鹏 pongba C 的罗浮宫 http blog csdn net pongba 首先 一个编译单元 translation unit 是指一个 cpp文件以及它所 include的所有 h
  • 倒序打印一个单链表

    public class SingleLinkList private static LinkListNode root public static LinkListNode initSingleLinkList LinkListNode
  • ionic 修改组件默认样式_Angular/Ionic 修改 ShadowRoot 元素样式

    在使用Ionic的时候 难免会出现要修改原有样式的情况 但新版的Ionic采用了ShadowRoot来隔离样式 不能愉快的直接通过CSS修改ShadowRoot下的样式 但我们又想修改 怎么办呢 方法一 使用 CSS3 part伪元素 但该
  • 单片机开发,主函数没调用任何程序,串口一直收到00 0 FF之类的数据

    本人是单片机小白 记录一些开发过程中的发现和心得 最近在用MSP430F1232配合射频模块 Ti的CC1101芯片 开发无线收发程序 发现向板子里灌写程序后 串口助手sscom一直收到00 0 FF之类的数据 起初以为是电平转换芯片SP3
  • numpy 笔记 extract

    用于从数组中提取满足某些条件的元素 numpy extract condition arr condition 一个布尔数组 这个布尔数组与 arr 的大小应当是一致的 arr 一个数组 从这个数组中我们会根据 condition 提取元素
  • Pytorch Mask R-CNN 实例分割

    Mask R CNN通过在 Faster RCNN 的基础上添加一个分支网络 在实现目标检测的同时 把目标像素分割出来 图像分割是深度学习和神经网络的一个重要应用 使用Pytorch自带的Mask R CNN模型 在实例分割中每个实例根据不
  • PostMan测试接口时候,如何绕过登录的验证

    之前测试的时候 需要页面进行登录之后 才能让访问后台程序 但是在进行接口测试的时候 没有验证就一直登录不进去 之后参考了一篇文章 解决如下 1 在浏览器上先登录 登录成功后获取cookie 2 接着打开postman 记住JSESSIONI
  • Python之Lock锁

    python中的锁lock threading Lock 避免多个线程保卫同一块数据的时候 产生错误 所以加锁来防止这种问题 import threading import time from queue import Queue def
  • react在不弹出eject的情况下配置sass和antd

    天气越来越热 公司的业务也慢慢放缓 这时候就有空暇时间为自己充点电了 然后就把目标放在了react上 公司的前端技术框架用的是vue 对react早就如雷贯耳 然后自己看了文档就劈里啪啦开始搞 在用create react app脚手架搭建
  • 竞赛 基于RSSI的室内wifi定位系统

    0 前言 优质竞赛项目系列 今天要分享的是 wifi室内定位系统 该项目较为新颖 适合作为竞赛课题方向 学长非常推荐 学长这里给一个题目综合评分 每项满分5分 难度系数 3分 工作量 3分 创新点 4分 更多资料 项目分享 https gi
  • new Date() 日期格式的转换

    let date new Date date getFullYear 获取年份 格式1970年 date getMonth 获取当前年的月份 月份要 1 0代表1月 date getMonth 1 date getDate 获取当前日 1
  • 手写数字识别 (tensorflow==2.4.0)

    import tensorflow as tf from tensorflow import keras fashion mnist keras datasets fashion mnist train images train label
  • 使用jQuery操作input的value值

    表单控件是jQuery的重中之重 因为一旦牵扯到数据交互 就离不开form表单的使用 比如用户的登录注册功能等 在进行操作input的value值的时候 主要使用jQuery的val 方法 点击查看val 的使用方法 看如下代码