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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jquery仿微信聊天界面
May 06 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jQuery treeview树形结构应用
Mar 24 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版
2006/10/09 PHP
php生成EXCEL的东东
2006/10/09 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
php并发加锁示例
2016/10/17 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
js常用排序实现代码
2010/12/28 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
汽车队司机先进事迹材料
2014/02/01 职场文书
生产厂长岗位职责
2014/02/21 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
MySQL表字段时间设置默认值
2021/05/13 MySQL
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL