05-使用jQuery操作input的value值

 

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

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

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

看如下HTML结构:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <form action="">
  9. <input type="radio" name="sex" value="112" />
  10. <!-- 设置cheked属性表示选中当前选项 -->
  11. <input type="radio" name="sex" value="11" checked="" />
  12. <input type="radio" name="sex" value="11" />gay
  13.  
  14. <input type="checkbox" value="a" checked=""/>吃饭
  15. <input type="checkbox" value="b" />睡觉
  16. <input type="checkbox" value="c" checked=""/>打豆豆
  17.  
  18. <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->
  19. <select name="timespan" id="timespan" class="Wdate" >
  20. <option value="1">8:00-8:30</option>
  21. <option value="2" selected="">8:30-9:00</option>
  22. <option value="3">9:00-9:30</option>
  23. </select>
  24. <input type="text" name="" id="" value="111" />
  25. </form>
  26.  
  27. </body>
  28. </html>

页面展示效果:

操作表单控件代码如下:

  1. <script type="text/javascript" src="jquery-3.3.1.js"></script>
  2. <script type="text/javascript">
  3.  
  4. $(function(){
  5. // 一、获取值
  6. //1.获取单选框被选中的value值
  7. console.log($('input[type=radio]:checked').val())
  8.  
  9. //2.复选框被选中的value,获取的是第一个被选中的值
  10. console.log($('input[type=checkbox]:checked').val())
  11.  
  12. //3.下拉列表被选中的值
  13.  
  14. var obj = $("#timespan option:selected");
  15. // 获取被选中的值
  16. var time = obj.val();
  17. console.log(time);
  18. // 获取文本
  19. var time_text = obj.text();
  20. console.log("val:"+time+" text"+ time_text );
  21.  
  22. //4.获取文本框的value值
  23. console.log($("input[type=text]").val())//获取文本框中的值
  24.  
  25. // 二.设置值
  26. //1.设置单选按钮和多选按钮被选中项
  27. $('input[type=radio]').val(['112']);
  28. $('input[type=checkbox]').val(['a','b']);
  29.  
  30. //2.设置下拉列表框的选中值,必须使用select
  31. /*因为option只能设置单个值,当给select标签设置multiple。
  32. 那么我们设置多个值,就没有办法了,但是使用select设置单个值和多个值都可以
  33. */
  34. $('select').val(['3','2'])
  35.  
  36. //3.设置文本框的value值
  37. $('input[type=text]').val('试试就试试')
  38.  
  39. })
  40.  
  41. </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. node 跨域请求设置

    http.createServer((req,res)=>{ //设置允许跨域的域名,*代表允许任意域名跨域 res.setHeader("Access-Control-Allow-O ...

  2. vue.js 树菜单 递归组件树来实现

    树形视图 Example: https://vuefe.cn/v2/examples/tree-view.html 参照前辈方法实现的,觉得不错,记录一下: 父组件: <!-- 菜单树 --&g ...

  3. redis 全局命令 查看所有的键,删除键,检查键是否存在,获取过期时间,键的数据结构类型

    Redis有5中数据结构,他们是键值对中的值,对于键来说,有一些通用的命令: 一.查看所有键 keys * 二.获取键总数:dbsize 三.检查键是否存在 exists 如果存在返回1,不存在返回0 ...

  4. c# c/s 框架读取的配置文件时是app.exe.config

    c# c/s 框架读取的配置文件时是app.exe.config, 一般在bin中间中俄debug中或者Release中

  5. grep 打印相关行内容

    grep 打印相关行数常用参数: -r:关键字 -c:打印符合要求的行数 -i:忽略大小写 -n:输出行和行号 -v:打印不符合要求的行,即反选 -A:后跟数字(有无空格都可以),例如 -A3表示打印 ...

  6. [C++]PAT乙级1011. A+B和C (15/15)

    /* 1011. A+B和C (15) 给定区间[-2^31, 2^31]内的3个整数A.B和C,请判断A+B是否大于C. 输入格式: 输入第1行给出正整数T(<=10),是测试用例的个数.随后 ...

  7. target与currentTarget与this的区别

    target与currentTarget与this的区别: target在事件流的目标阶段:currentTarget在事件的捕获.目标及冒泡阶段. 只有当事件流处在目标阶段的时候,二者的指向才是一致 ...

  8. 模拟post表单提交参数

    Content-Type: application/x-www-form-urlencoded;charset=utf-8

  9. eclipse快捷键调试总结 -转--快捷键大全

    (1)Ctrl+M --切换窗口的大小(2)Ctrl+Q --跳到最后一次的编辑处(3)F2      ---重命名类名 工程名 --当鼠标放在一个标记处出现Tooltip时候按F2则把鼠标移开时To ...

  10. 调试 - Visual Studio调试

    Visual Studio - 调试 异常处理机制 windows预定义了一系列的异常错误码,每种程序异常都有一个对应的错误码,windows系统将这些类似键值对关系的数据存储在异常处理表中(称为SE ...