【Jquery】- 表單、表格、複選框

Jquery 表單Form操做

界面

<input type="button" value="利用 jQuery 對象的 val() 方法改變表單內 type=text 可用 <input> 元素的值"  id="b1"/><br>
 <input type="button" value="利用 jQuery 對象的 length 屬性獲取多選框選中的個數"  id="b2"/><br>
 <input type="button" value="利用 jQuery 對象的 text() 方法獲取下拉框選中的內容"  id="b3"/><br>
 <br>
  <input type="text" value="籃球1"/>
  <input type="text" value="籃球2"/>
  <input type="text" value="籃球3" disabled="true"/>
  <input type="text" value="籃球4" disabled="true"/>
  <br>
  <input type="checkbox" value="愛好1"/>愛好1
  <input type="checkbox" value="愛好2"/>愛好2
  <input type="checkbox" value="愛好3"/>愛好3
  <input type="checkbox" value="愛好4"/>愛好4
  <br>
  <select name="job" size=6 multiple="multiple">
		  <option value="選項1">選項1^^</option>
		  <option value="選項2">選項2^^</option>
		  <option value="選項3">選項3^^</option>
		  <option value="選項4">選項4^^</option>
		  <option value="選項5">選項5^^</option>
		  <option value="選項6">選項6^^</option>
   </select><br>
   
   <select id="hsp" name="edu">
		  <option value="博士">博士^^</option>
		  <option value="碩士">碩士^^</option>
		  <option value="本科">本科^^</option>
		  <option value="小學">小學^^</option>
   </select>

js操做邏輯

/*$("input[type='text']:enabled")
   *獲取含有屬性type=text而且類型爲enabled的input元素(enabled)
   */
   $("#b1").click(function(){
	   $("input[type='text']:enabled").css("background","red");
       $("input[type='text']:enabled").val("enabled");    
	   $("input[type='text']:disabled").css("background","yellow");
       $("input[type='text']:disabled").val("disabled"); 
   });
   
   //:checkbox：選中表單元素checkbox
   $("#b2").click(function(){
	   //var $checkboxs=$("input[type='checkbox']:checked");
       var $checkboxs=$(":checkbox:checked");
	      alert("多選框選中數："+$checkboxs.length);
   });
   
   $("#b3").click(function(){
	  
       var $selects=$("select option:selected");
	   //便利selects數組中的元素 i序號 n成員對象
	   $selects.each(function(i,n){
	       alert("多選框選中數："+$(n).val());
	   });  
   });

效果：

---

Jquery Table元素動態建立

界面

用戶：<input type="text" id="user"/>
郵箱：<input type="text" id="mail"/>
手機：<input type="text" id="phone"/>
<br>
<button id="b1">添加</button><br>
<table border=1 id="table">
<tr><td>user</td><td>mail</td><td>phone</td><td>operation</td></tr>
<tr><td>zhangsan</td><td>aaa@qq.com</td><td>25652463</td><td><a href="##">delete</a></td></tr>
</table>

js操做邏輯

$("#b1").click(function(){
var $user=$("#user");
var $mail=$("#mail");
var $phone=$("#phone");

//組裝對象
$tr=$("<tr></tr>");
$td1=$("<td></td>");
$td1.text($user.val());

$td2=$("<td></td>");
$td2.text($mail.val());

$td3=$("<td></td>");
$td3.text($phone.val());

$td4=$("<td></td>");

$href=$("<a></a>");
$href.attr("href","##");
$href.text("delete");
$td4.append($href);

$href.click(function(){
if(window.confirm("肯定刪除？")){
  //這裏使用this表示當前事件綁定對象---？ $(this)不能用$(href)代替，不然會認爲每次都是最新對象，原有對象的行爲不能保存
  $(this).parent().parent().remove();  
}else{
   return;
}
});

$("#table").append($tr);
	$tr.append($td1);
	$tr.append($td2);
	$tr.append($td3);
	$tr.append($td4);
});

Jquery 多選框 checkbox

界面

<br><br>
<input type="checkbox" id="c1">全選/全不選<br>
興趣愛好：<br>
<input type="checkbox" name="interst" value="basketball">籃球
<input type="checkbox" name="interst" value="football">足球
<input type="checkbox" name="interst" value="bedminton">羽毛球<br>
<input type="button" id="b1" value="全選">
<input type="button" id="b2" value="全不選">
<input type="button" id="b3" value="反選">
<input type="button" id="b4" value="顯示">

js操做邏輯

$("#c1").click(function(){
if(this.checked){
	$("input[name='interst']").attr("checked","checked");
}else{
	//$("input[name='interst']").attr("checked",""); //等價於
	$("input[name='interst']").removeAttr("checked");
}
});

$("#b1").click(function(){
	$("input[name='interst']").attr("checked","checked");
});

$("#b2").click(function(){
	$("input[name='interst']").attr("checked","");
});

$("#b3").click(function(){
	$("input[name='interst']").each(function(){
	if(this.checked){
		this.checked="";
	}else{
		this.checked="checked";
	}
	});
});

$("#b4").click(function(){
$("input[name='interst']:checked").each(function(){
	alert(this.value);
});
});

效果：