1、文本框
用戶名:<input type="text" name="username" id="username"/>
獲取文本框的輸入值:
var username=$("input[name='username']").val();
2、checkbox 多項選擇
用戶興趣:<input type="checkbox" name="interest" value="足球"/>足球
<input type="checkbox" name="interest" value="籃球"/>藍球
<input type="checkbox" name="interest" value="羽毛球"/>羽毛球
<input type="checkbox" name="interest" value="游泳"/>游泳<br/>
獲取選中的多選框的值:
因爲選中的值可能是多個,這裏用一個數組來存儲和操作
function checkArray(){
var val=$("input[name='interest']:checked");
if (val.length>0) {
var interests= new Array();
$(val).each(function(n){
interests.push($(this).val());
});
};
return(interests);
}
checkbox的一個例子,實現全選功能:
注意:
①判斷選擇框是否選中:
var sel = $(this).is(':checked');
選中返回true,沒選中返回false
②設置選擇框的選中狀態
$(this).prop("checked",true);
一開始使用attr('checked',true)不管用,後來發現貌似新版本都用prop('checked',true)
<!DOCTYPE html>
<html>
<head>
<title>多選框的全選</title>
<meta charset="utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#sel").click(function(){
var sel = $(this).is(':checked');
$("#xm input").each(function(){
if (sel==true) {
$(this).prop("checked",true);
$("#sel").next("span").html("全取消");
}else{
$(this).prop("checked",false);
$("#sel").next("span").html("全選");
}
});
});
});
</script>
</head>
<body>
<p>你最喜愛的運動是</p>
<p>
<input id="sel" type="checkbox" value="全選/全不選"><span>全選</span>
</p>
<p id="xm">
<input type="checkbox" value="足球">足球
<input type="checkbox" value="籃球">籃球
<input type="checkbox" value="羽毛球">羽毛球
<input type="checkbox" value="乒乓球">乒乓球
</p>
</body>
</html>
3、select中的option用戶戶籍:<select name="address" id="address">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">昭通</option>
<option value="4">彝良</option>
</select> <br/>
①option的選中方式:
var val=$("#address option:checked");
②發現對於option .val() 只能獲取到選項所在的數字位置,而.text()才能獲取到相應的文本
這一點和checkbox是不一樣的
function checkArray1(){
var val=$("#address option:checked");
if (val.length>0) {
var interests= new Array();
$(val).each(function(n){
interests.push($(this).text());
});
};
return(interests);
}