妙用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修改css样式style
Apr 15 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
webpack多入口多出口的实现方法
Aug 17 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
详解Vue的options
May 15 Vue.js
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
php中截取字符串支持utf-8
2007/01/18 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
php中session与cookie的比较
2015/01/27 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
详解Vue中watch的详细用法
2018/11/28 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
JS对日期操作封装代码实例
2019/11/08 Javascript
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
python查看模块,对象的函数方法
2018/10/16 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python代码能做成软件吗
2020/07/24 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
c语言常见笔试题总结
2016/09/05 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
高中生学习计划书
2014/09/15 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2014年行政部工作总结
2014/11/19 职场文书
房产电话营销开场白
2015/05/29 职场文书
法定授权委托证明书
2015/06/18 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB