jQuery表单设置值的方法


Posted in jQuery onJune 30, 2017

本文实例为大家分享了jQuery如何表单设置值的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script>
    $(function () {
      $("input[type=button]:eq(0)").click(function () {
        $("#single").val("选择2号");
      });
      $("input[type=button]:eq(1)").click(function () {
        $("#multiple").val(["选择2号","选择3号"]);
      })
      $("input[type=button]:eq(2)").click(function () {
        $(":checkbox").val(["check2","check3"]);//等同于$("input[type=checkbox]").filter(":eq(0),:eq(1)").attr("checked","checked")
        $(":radio").val(["radio3"]);//等同于$("input[type=radio]").attr("checked","checked"),虽然是单选框,取值还是得用数组
      });
    });
  </script>
</head>
<body>
<input type="button" value="设置单选下拉框选中"/>
<input type="button" value="设置多选下拉框选中"/>
<input type="button" value="设置单选框和多选框选中"/>

<br/><br/>

<select id="single">
  <option>选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
</select>

<select id="multiple" multiple="multiple" style="height:120px;">
  <option selected="selected">选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
  <option>选择4号</option>
  <option selected="selected">选择5号</option>
</select>

<br/><br/>


<input type="checkbox" value="check1"/> 多选1
<input type="checkbox" value="check2"/> 多选2
<input type="checkbox" value="check3"/> 多选3
<input type="checkbox" value="check4"/> 多选4

<br/>

<input type="radio" value="radio1"/> 单选1
<input type="radio" value="radio2"/> 单选2
<input type="radio" value="radio3"/> 单选3
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 #jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 #jQuery
基于jQuery封装的分页组件
Jun 26 #jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 #jQuery
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php xml文件操作代码(一)
2009/03/20 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
php中this关键字用法分析
2016/12/07 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
js对象的复制继承实例
2015/01/10 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
医院学雷锋活动策划方案
2014/02/15 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
伦敦奥运会口号
2014/06/13 职场文书
先进事迹材料范文
2014/12/29 职场文书
初中生毕业评语
2014/12/29 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
vue使用element-ui按需引入
2022/05/20 Vue.js