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 Tree Multiselect使用详解
May 02 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
模拟select的代码
2011/10/19 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python获得图片base64编码示例
2014/01/16 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
Python实现针对中文排序的方法
2017/05/09 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
探亲邀请信范文
2014/01/30 职场文书
开展警示教育活动总结
2015/05/09 职场文书
雷锋观后感
2015/06/10 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang