妙用Jquery的val()方法

更新時間：2012年06月27日 16:05:34 作者：

Jquery的val()方法不僅能夠設置元素的值，同時也能獲取元素的值。常見的操作是對文本框的操作，比如判斷郵箱地址等

看下面的一個例子：

 
<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> 

運行后，默認的顯示效果如下圖：

這個時候想要改變選中的項，該怎么辦呢？在javascript區(qū)域添加如下代碼：

復制代碼代碼如下:

 
$(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"]); //以數(shù)組的形式賦值 
}); 
//設置單選框和多選框選中 
$("input:eq(2)").click(function(){ 
$(":checkbox").val(["check2","check3"]); //以數(shù)組的形式賦值 
$(":radio").val(["radio2"]); 
}); 
}); 

然后分別點擊如下的三個按鈕：

則會發(fā)現(xiàn)，默認的選中項已經變?yōu)槟阋O置的項了。如下所示：

以上就為jquery的val()方法的一個妙用，希望能夠對你在操作多選和復選框的時候能夠有所幫助。

您可能感興趣的文章:

bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法
這篇文章主要介紹了bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法,需要的朋友可以參考下
2017-10-10
jquery zTree異步加載簡單實例分享
Ztree是一個使用jQuery實現(xiàn)的JSP頁面的各種功能樹，本文介紹一個異步獲取數(shù)據到下拉樹的實現(xiàn)方式,感興趣的朋友可以了解下，或許對你學習ztree有所幫助
2013-02-02
jquery.validate使用詳解
Ajax在Web應用中的作用越來越大，許多工具都包含了對這一功能的使用，以下是對這些常用工具中Ajax的典型實例.
2016-06-06
jQuery代碼優(yōu)化方法總結
本篇文章給大家總結了關于jQuery代碼優(yōu)化方法，如果你這方面有需求，跟著小編一起學習下吧。
2018-01-01
jQuery模板技術和數(shù)據綁定實現(xiàn)代碼
如果你用過ASP.NET的數(shù)據綁定控件，也用過ASP或者JSP里那種通過輸出HTML元素在頁面上顯示數(shù)據的方法，你就知道ASP.NET數(shù)據綁定控件有多么方便。如果能夠將同樣的功能在瀏覽器端用HTML和JavaScript實現(xiàn)，那該是多少美妙的事情。
2010-05-05
JQuery Tips(3) 關于$()包裝集內元素的改變
JQuery包裝集內的元素在一開始的選定后，還可以通過一系列JQuery提供的方法對包裝集內的元素進行擴充，修改，篩選，刪除find()方法 VS filter()方法
2009-12-12
關于jQuery中.attr()和.prop()的問題探討
寫了幾句代碼在ie8上能正常運行，chrome和ff卻不行，prop()方法適用于Boolean值的屬性，添加屬性名稱該屬性就會生效應該使用.prop()者兩點就是他們的區(qū)別吧
2013-09-09
基于jQuery的彈出消息插件 DivAlert之旅（一）
這個DivAlert插件，顧名思義就是頁面彈出框，也就相當于Winform里面MessageBox.Show()那樣的東西。
2010-04-04
jQuery EasyUI API 中文文檔 - Parser 解析器
jQuery EasyUI API 中文文檔 - Parser 解析器，使用jQuery EasyUI的朋友可以參考下。
2011-09-09
載入jQuery庫的最佳方法詳細說明及實現(xiàn)代碼
網站開發(fā)的項目中使用Google CDN的jQuery庫雖然加載速度很快,但調用本地服務器的庫才可以確保萬無一失,接下來介紹載入jQuery庫的最佳方法,感興趣的朋友可以研究下
2012-12-12