快捷導(dǎo)航

Jquery知識(shí)點(diǎn)三 jquery表單對(duì)象操作

更新時(shí)間：2011年01月17日 17:32:10 作者：

Jquery中的val(),text(),html()是對(duì)javascrip中的value、innerText、innerHtml三個(gè)屬性的封裝

在Jquery中這三個(gè)函數(shù)如果有參數(shù)的話就是賦值操作，沒有參數(shù)則是取值操作，其中val()是一個(gè)很重要的方法，和它相關(guān)的表單對(duì)象如：input系的標(biāo)簽、select、textarea等都是用于和服務(wù)器端交互的標(biāo)簽元素，所以要搞清楚這個(gè)val（）；
對(duì)于radio、checkbox、select的賦值操作：

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

 
$("input[name=a]").val(["娛樂(lè)1"]); 
$("input[type=checkbox]").val(["籃球", "游戲"]); 
$("select").val(["籃球", "游戲"]); 

代碼分析：
對(duì)radio賦值，屬性選擇器獲取radio；
對(duì)checkbox賦值，屬性選擇器獲取checkbox,賦值用中括號(hào)[],如果是多個(gè)值的話中間用逗號(hào)隔開；
對(duì)select賦值,通過(guò)標(biāo)簽選擇器獲取select，
對(duì)于radio、checkbox、select的取值操作：

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

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

代碼分析：
聲明一個(gè)s的變量用于接收name=a的radio的被選正的值，也可以寫作var s=$(":radio:checked").val()，:radio可以理解為type=radio的input元素，是屬性選擇器的一種簡(jiǎn)化寫法;
獲取checkbox的被選中的值，因?yàn)閏heckbox是一個(gè)多選框，所以要用each對(duì)每一個(gè)選中項(xiàng)進(jìn)行處理，也可以根據(jù)屬性選擇器寫作： $("input[type=checkbox]:checked")；
對(duì)于select當(dāng)屬性multiple ="multiple"時(shí)，可以多選，這里也用each進(jìn)行遍歷處理；
小結(jié)：
對(duì)于input系的標(biāo)簽元素我們可以使用屬性選擇器獲取： $("input[type=checkbox]")，也可以通過(guò)簡(jiǎn)潔的方式: $(":checkbox"),類似的有：
:radio、:submit、:image、:reset、:button、:file、:hidden、:password、:text;
$(":input")選取所有的<input> <textarea> <select>和<button>元素
對(duì)于radio、checkbox獲取被選正的項(xiàng)用:checked,而對(duì)于select則用:selected( $("select :selected")、 $(":radio:checked").val();)

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

 
<!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=設(shè)置]").click(function() { 
$("input[name=a]").val(["娛樂(lè)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 ="娛樂(lè)1" /><label for ="b">娛樂(lè)1</label><br /> 
<input type ="radio" name ="a" value ="娛樂(lè)2" />娛樂(lè)2<br /> 
<input type ="radio" name ="a" value ="娛樂(lè)3" />娛樂(lè)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="設(shè)置"/> 
</body> 
</html> 