快捷導(dǎo)航

妙用Jquery的val()方法

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

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

看下面的一個(gè)例子：

 
<input type="text" id="address" value="請(qǐng)輸入郵箱地址"/> <br/><br/> 
<input type="text" id="password" value="請(qǐng)輸入郵箱密碼"/> <br/><br/> 
<input type="button" value="登陸"/> 

代碼：

復(fù)制代碼代碼如下:

 
$("#address").focus(function(){ // 地址框獲得鼠標(biāo)焦點(diǎn) 
var txt_value = $(this).val(); // 得到當(dāng)前文本框的值 
if(txt_value==this.defaultValue){ 
$(this).val(""); // 如果符合條件，則清空文本框內(nèi)容 
} 
}); 

注：this.defaultValue就是當(dāng)前文本框的默認(rèn)值。
val()方法還有另外的一個(gè)用處，就是它能使select(下拉列表框),checkbox(多選框)和radio(單選框)相應(yīng)的項(xiàng)被選中，這在表單操作中經(jīng)常會(huì)用到?？聪旅娴囊粋€(gè)例子：

復(fù)制代碼代碼如下:

 
<body> 
<input type="button" value="設(shè)置單選下拉框選中"/> 
<input type="button" value="設(shè)置多選下拉框選中"/> 
<input type="button" value="設(shè)置單選框和多選框選中"/> 
<br/><br/> 
<select id="single"> 
<option value="1">選擇1號(hào)</option> 
<option value="2">選擇2號(hào)</option> 
<option value="3">選擇3號(hào)</option> 
<option value="4">選擇4號(hào)</option> 
<option value="5">選擇5號(hào)</option> 
</select> 
<select id="multiple" multiple="multiple" style="height:120px;"> 
<option value="1" selected="selected">選擇1號(hào)</option> 
<option value="2">選擇2號(hào)</option> 
<option value="3">選擇3號(hào)</option> 
<option value="4">選擇4號(hào)</option> 
<option value="5" selected="selected">選擇5號(hào)</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> 

運(yùn)行后，默認(rèn)的顯示效果如下圖：

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

復(fù)制代碼代碼如下:

 
$(function(){ 
//設(shè)置單選下拉框選中 
$("input:eq(0)").click(function(){ 
//$("#single").val("選擇5號(hào)"); 
$("#single").val("5"); // 和$("#single").val("選擇5號(hào)");這 種方式都可以達(dá)到效果 
var options=$('#single option:selected') 
alert(options.val()); 
}); 
//設(shè)置多選下拉框選中 
$("input:eq(1)").click(function(){ 
// $("#multiple").val(["選擇2號(hào)", "選擇3號(hào)"]); 
$("#multiple").val(["3", "4"]); //以數(shù)組的形式賦值 
}); 
//設(shè)置單選框和多選框選中 
$("input:eq(2)").click(function(){ 
$(":checkbox").val(["check2","check3"]); //以數(shù)組的形式賦值 
$(":radio").val(["radio2"]); 
}); 
}); 