jquery 表單操作(一)

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章