Jquery知识点三 jquery表单对象操作


Posted in Javascript onJanuary 17, 2011

在Jquery中这三个函数如果有参数的话就是赋值操作,没有参数则是取值操作,其中val()是一个很重要的方法,和它相关的表单对象如:input系的标签、select、textarea等都是用于和服务器端交互的标签元素,所以要搞清楚这个val();
对于radio、checkbox、select的赋值操作:

$("input[name=a]").val(["娱乐1"]); 
$("input[type=checkbox]").val(["篮球", "游戏"]); 
$("select").val(["篮球", "游戏"]);

代码分析:
对radio赋值,属性选择器获取radio;
对checkbox赋值,属性选择器获取checkbox,赋值用中括号[],如果是多个值的话中间用逗号隔开;
对select赋值,通过标签选择器获取select,
对于radio、checkbox、select的取值操作:
var checkvalue = ""; 
var s = $("input[name=a]:checked").val(); 
$(":checkbox:checked").each(function() { 
checkvalue += $(this).val(); 
}); 
var selectvalue = ""; 
$("select :selected").each(function() { 
selectvalue += $(this).val(); 
}); 
alert("checkvalue:" + checkvalue + "radiovalue:" + s + "selectvalue:" + selectvalue);

代码分析:
声明一个s的变量用于接收name=a的radio的被选正的值,也可以写作var s=$(":radio:checked").val(),:radio可以理解为type=radio的input元素,是属性选择器的一种简化写法;
获取checkbox的被选中的值,因为checkbox是一个多选框,所以要用each对每一个选中项进行处理,也可以根据属性选择器写作: $("input[type=checkbox]:checked");
对于select当属性multiple ="multiple"时,可以多选,这里也用each进行遍历处理;
小结:
对于input系的标签元素我们可以使用属性选择器获取: $("input[type=checkbox]"),也可以通过简洁的方式: $(":checkbox"),类似的有:
:radio、:submit、:image、:reset、:button、:file、:hidden、:password、:text;
$(":input")选取所有的<input> <textarea> <select>和<button>元素
对于radio、checkbox获取被选正的项用:checked,而对于select则用:selected( $("select :selected")、 $(":radio:checked").val();)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../myjs/jquery-1.4.2-vsdoc.js" type="text/javascript"></script> 
<script type ="text/javascript" > 
$(function() { 
$(":button[value=取值]").click(function() { 
var checkvalue = ""; 
//var s = $("input[name=a]:checked").val(); 
var s = $(":radio:checked").val(); 
$("input[type=checkbox]:checked").each(function() { 
checkvalue += $(this).val(); 
}); 
var selectvalue = ""; 
$("select :selected").each(function() { 
selectvalue += $(this).val(); 
}); 
alert("checkvalue:" + checkvalue + "radiovalue:" + s + "selectvalue:" + selectvalue); 
}); 
$(":button[value=设置]").click(function() { 
$("input[name=a]").val(["娱乐1"]); 
$("input[type=checkbox]").val(["篮球", "游戏"]); 
$("select").val(["篮球", "游戏"]); 
}); 
}); </script> 
</head> 
<body> 
<input type ="checkbox" id="footbal" value="足球"/><label for ="footbal">足球</label><br /> 
<input type ="checkbox" value="篮球" />篮球<br /> 
<input type ="checkbox"value="看书" />看书<br /> 
<input type ="checkbox" value="游戏"/>游戏<br /><hr /> 
<input type ="radio" name ="a" id="b" value ="娱乐1" /><label for ="b">娱乐1</label><br /> 
<input type ="radio" name ="a" value ="娱乐2" />娱乐2<br /> 
<input type ="radio" name ="a" value ="娱乐3" />娱乐3<br /> 
<hr /> 
<select multiple ="multiple" > 
<option value ="篮球">篮球</option> 
<option value ="足球">足球</option> 
<option value ="看书">看书</option> 
<option value ="游戏">游戏</option> 
</select> 
<input type ="button" value="取值"/> <input type ="button" value="设置"/> 
</body> 
</html>
Javascript 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 #Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 #Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 #Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 #Javascript
JavaScript去掉数组中的重复元素
Jan 13 #Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 #Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 #Javascript
You might like
php xml实例 留言本
2009/03/20 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
Laravel find in set排序实例
2019/10/09 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python递归下载文件夹下所有文件
2019/08/31 Python
团队拓展训练心得体会
2016/01/12 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python