妙用Jquery的val()方法


Posted in Javascript onJune 27, 2012

看下面的一个例子:

<input type="text" id="address" value="请输入邮箱地址"/> <br/><br/> 
<input type="text" id="password" value="请输入邮箱密码"/> <br/><br/> 
<input type="button" value="登陆"/>

代码:
$("#address").focus(function(){ // 地址框获得鼠标焦点 
var txt_value = $(this).val(); // 得到当前文本框的值 
if(txt_value==this.defaultValue){ 
$(this).val(""); // 如果符合条件,则清空文本框内容 
} 
});

注:this.defaultValue就是当前文本框的默认值。
val()方法还有另外的一个用处,就是它能使select(下拉列表框),checkbox(多选框)和radio(单选框)相应的项被选中,这在表单操作中经常会用到。看下面的一个例子:
<body> 
<input type="button" value="设置单选下拉框选中"/> 
<input type="button" value="设置多选下拉框选中"/> 
<input type="button" value="设置单选框和多选框选中"/> 
<br/><br/> 
<select id="single"> 
<option value="1">选择1号</option> 
<option value="2">选择2号</option> 
<option value="3">选择3号</option> 
<option value="4">选择4号</option> 
<option value="5">选择5号</option> 
</select> 
<select id="multiple" multiple="multiple" style="height:120px;"> 
<option value="1" selected="selected">选择1号</option> 
<option value="2">选择2号</option> 
<option value="3">选择3号</option> 
<option value="4">选择4号</option> 
<option value="5" 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>

运行后,默认的显示效果如下图:
妙用Jquery的val()方法
这个时候想要改变选中的项,该怎么办呢?在javascript区域添加如下代码:
$(function(){ 
//设置单选下拉框选中 
$("input:eq(0)").click(function(){ 
//$("#single").val("选择5号"); 
$("#single").val("5"); // 和$("#single").val("选择5号");这 种方式都可以达到效果 
var options=$('#single option:selected') 
alert(options.val()); 
}); 
//设置多选下拉框选中 
$("input:eq(1)").click(function(){ 
// $("#multiple").val(["选择2号", "选择3号"]); 
$("#multiple").val(["3", "4"]); //以数组的形式赋值 
}); 
//设置单选框和多选框选中 
$("input:eq(2)").click(function(){ 
$(":checkbox").val(["check2","check3"]); //以数组的形式赋值 
$(":radio").val(["radio2"]); 
}); 
});

然后分别点击如下的三个按钮:

妙用Jquery的val()方法

则会发现,默认的选中项已经变为你要设置的项了。如下所示:

妙用Jquery的val()方法

以上就为jquery的val()方法的一个妙用,希望能够对你在操作多选和复选框的时候能够有所帮助。
Javascript 相关文章推荐
javascript淡入淡出效果的实现思路
Mar 31 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
jQuery.extend 函数的详细用法
Jun 27 #Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 #Javascript
javascript 事件处理程序介绍
Jun 27 #Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 #Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 #Javascript
跨浏览器的事件对象介绍
Jun 27 #Javascript
UI Events 用户界面事件
Jun 27 #Javascript
You might like
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php在文件指定行中写入代码的方法
2012/05/23 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Python continue语句用法实例
2014/03/11 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python选课系统开发程序
2016/09/02 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
2014小学数学教研组工作总结
2014/12/06 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
学校就业保障协议书
2019/06/24 职场文书
python数字类型和占位符详情
2022/03/13 Python