当前位置: 首页 > news >正文

使用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>

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

相关文章:

  • tpl-angularjs Web端开发工程模板
  • [python] RRT快速拓展随机树
  • 《Python从菜鸟到高手》已经出版,开始连载了,购买送视频课程
  • Clojure基础课程2-Clojure中的数据长啥样?
  • Spring Boot【快速入门】
  • 使用时间器区别网页上的单击和双击
  • css设置全局变量和局部变量
  • 宏观政策转向,消费金融行业能否送别“至暗时刻”?
  • vc code
  • FLIP-24+-+SQL+Client
  • 【转】【WPF】WPF - MVVM - 如何将ComboBox的Selectchange事件binding到ViewModel
  • linux内核中链表代码分析---list.h头文件分析(二)【转】
  • 时间不对导致vSAN服务无法启动
  • C# WinForm 技巧十: winfrom 全屏自适应屏幕分辨率
  • Java 软件高级工程师笔试题
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • JavaScript实现分页效果
  • mysql 数据库四种事务隔离级别
  • Mysql数据库的条件查询语句
  • vue中实现单选
  • webpack项目中使用grunt监听文件变动自动打包编译
  • 爬虫模拟登陆 SegmentFault
  • 前端js -- this指向总结。
  • 如何利用MongoDB打造TOP榜小程序
  • 数据可视化之 Sankey 桑基图的实现
  • 跳前端坑前,先看看这个!!
  • 在electron中实现跨域请求,无需更改服务器端设置
  • [Shell 脚本] 备份网站文件至OSS服务(纯shell脚本无sdk) ...
  • (09)Hive——CTE 公共表达式
  • (C语言)二分查找 超详细
  • (Java岗)秋招打卡!一本学历拿下美团、阿里、快手、米哈游offer
  • (PHP)设置修改 Apache 文件根目录 (Document Root)(转帖)
  • (顶刊)一个基于分类代理模型的超多目标优化算法
  • (二十五)admin-boot项目之集成消息队列Rabbitmq
  • (附源码)流浪动物保护平台的设计与实现 毕业设计 161154
  • (六)软件测试分工
  • (四) 虚拟摄像头vivi体验
  • .gitignore文件_Git:.gitignore
  • .NET Conf 2023 回顾 – 庆祝社区、创新和 .NET 8 的发布
  • .NET delegate 委托 、 Event 事件,接口回调
  • .NET 中什么样的类是可使用 await 异步等待的?
  • .NET/ASP.NETMVC 深入剖析 Model元数据、HtmlHelper、自定义模板、模板的装饰者模式(二)...
  • .net6 webapi log4net完整配置使用流程
  • .NET框架设计—常被忽视的C#设计技巧
  • .net实现客户区延伸至至非客户区
  • [android] 天气app布局练习
  • [C++数据结构](22)哈希表与unordered_set,unordered_map实现
  • [CDOJ 838]母仪天下 【线段树手速练习 15分钟内敲完算合格】
  • [CISCN 2023 初赛]go_session
  • [DevEpxress]GridControl 显示Gif动画
  • [IE技巧] IE 中打开Office文件的设置
  • [iOS开发]iOS中TabBar中间按钮凸起的实现
  • [Java性能剖析]Sun JDK基本性能剖析工具介绍
  • [Linux] CE知识随笔含Ansible、防火墙、VIM、其他服务
  • [Machine Learning] 领域适应和迁移学习