快捷導(dǎo)航

Jquery知識點三 jquery表單對象操作

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

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

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

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

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

代碼分析：
對radio賦值，屬性選擇器獲取radio；
對checkbox賦值，屬性選擇器獲取checkbox,賦值用中括號[],如果是多個值的話中間用逗號隔開；
對select賦值,通過標(biāo)簽選擇器獲取select，
對于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); 

代碼分析：
聲明一個s的變量用于接收name=a的radio的被選正的值，也可以寫作var s=$(":radio:checked").val()，:radio可以理解為type=radio的input元素，是屬性選擇器的一種簡化寫法;
獲取checkbox的被選中的值，因為checkbox是一個多選框，所以要用each對每一個選中項進(jìn)行處理，也可以根據(jù)屬性選擇器寫作： $("input[type=checkbox]:checked")；
對于select當(dāng)屬性multiple ="multiple"時，可以多選，這里也用each進(jìn)行遍歷處理；
小結(jié)：
對于input系的標(biāo)簽元素我們可以使用屬性選擇器獲?。?$("input[type=checkbox]")，也可以通過簡潔的方式: $(":checkbox"),類似的有：
:radio、:submit、:image、:reset、:button、:file、:hidden、:password、:text;
$(":input")選取所有的<input> <textarea> <select>和<button>元素
對于radio、checkbox獲取被選正的項用:checked,而對于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(["娛樂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 ="娛樂1" /><label for ="b">娛樂1</label><br /> 
<input type ="radio" name ="a" value ="娛樂2" />娛樂2<br /> 
<input type ="radio" name ="a" value ="娛樂3" />娛樂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> 