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

效果：