DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Jquery知識點三 jquery表單對象操作
Jquery知識點三 jquery表單對象操作
編輯:JQuery特效代碼     
在Jquery中這三個函數如果有參數的話就是賦值操作,沒有參數則是取值操作,其中val()是一個很重要的方法,和它相關的表單對象如:input系的標簽、select、textarea等都是用於和服務器端交互的標簽元素,所以要搞清楚這個val();
對於radio、checkbox、select的賦值操作:
代碼如下:
$("input[name=a]").val(["娛樂1"]);
$("input[type=checkbox]").val(["籃球", "游戲"]);
$("select").val(["籃球", "游戲"]);

代碼分析:
對radio賦值,屬性選擇器獲取radio;
對checkbox賦值,屬性選擇器獲取checkbox,賦值用中括號[],如果是多個值的話中間用逗號隔開;
對select賦值,通過標簽選擇器獲取select,
對於radio、checkbox、select的取值操作:
代碼如下:
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對每一個選中項進行處理,也可以根據屬性選擇器寫作: $("input[type=checkbox]:checked");
對於select當屬性multiple ="multiple"時,可以多選,這裡也用each進行遍歷處理;
小結:
對於input系的標簽元素我們可以使用屬性選擇器獲取: $("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();)
代碼如下:
<!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=設置]").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="設置"/>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved