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插件制作 自增长输入框实现代码
Aug 17 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery实现简单评论区功能
Oct 26 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面向对象概念
2011/11/06 PHP
调整PHP的性能
2013/10/30 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
js表格分页实现代码
2009/09/18 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
汇科协同Java笔试题
2012/03/31 面试题
物流创业计划书
2014/02/01 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
司法建议书范文
2014/05/13 职场文书
应聘教师自荐书
2014/06/16 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
Go语言基础知识点介绍
2021/07/04 Golang