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 append与appendTo方法比较
May 24 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 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/03/25 PHP
2014过年倒计时示例
2014/01/31 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
requireJS使用指南
2016/04/27 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python中关于使用模块的基础知识
2015/05/24 Python
python web框架学习笔记
2016/05/03 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python交互式图形编程实例(三)
2017/11/17 Python
scrapy爬虫实例分享
2017/12/28 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
机关党员三严三实心得体会
2014/10/13 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android