第5章 jQuery对表单、表格的操作及更多应用

表单聚焦改变颜色 切换

<form action="#">
		<fieldset>
			<legend>个人基本信息</legend>
			<div>
				<lable>名称：</lable>
				<input type="text">
			</div><br>
			<div>
				<lable>密码：</lable>
				<input type="password">
			</div><br>
			<div>
				<lable>详情信息：</lable>
				<textarea name="" id="" cols="30" rows="10"></textarea>
			</div>
			<input type="button" value="提交">
			<input type="reset" value="重置">
		</fieldset>
	</form> 

$(function(){
		$(":input").focus(function(){
				$(this).addClass("focus")
		}).blur(function(){
				$(this).removeClass("focus")
		})
})

复选框应用

	<form action="#">
		你爱好的运动是？<br>	
		<input type="checkbox" name="item" id="">足球
		<input type="checkbox" name="item" id="">篮球
		<input type="checkbox" name="item" id="">羽毛球
		<input type="checkbox" name="item" id="">跳绳<br>
		<input type="button" value="全选" id="CheckedAll">
		<input type="button" value="全不选" id="CheckedNo">
		<input type="button" value="反选" id="CheckedRev">
		<input type="button" value="提交" id="send">
	</form>

$(function(){
	$("#CheckedAll").click(function(){
		$('[name=item]:checkbox').attr('checked',true)  //全选
	})
	$("#CheckedNo").click(function(){
		$('[name=item]:checkbox').attr('checked',false)  //全不选
	})
	$("#CheckedRev").click(function(){
		$("[name=item]:checkbox").each(function(){
			this.checked=!this.checked                   //反选
		})
	})
	$("#send").click(function(){
		var str="你选中的是：\r\n";
		$("[name=item]:checkbox:checked").each(function(){   //提交
			str+=$(this).val()+"\r\n"
		})
		alert(str)
	})
})

全选、反选的另一种方式
<form action="#">
		你爱好的运动是？<br>
		<input type="checkbox" name="item" id="CheckedAll" value="全选/全不选">全选/全不选	
		<input type="checkbox" name="item" id="" value="足球">足球
		<input type="checkbox" name="item" id="" value="篮球">篮球
		<input type="checkbox" name="item" id="" value="羽毛球">羽毛球
		<input type="checkbox" name="item" id="" value="跳绳">跳绳<br>
		
		<input type="button" value="提交" id="send">
	</form>


$("#CheckedAll").click(function(){
	$('[name=item]:checkbox').attr("checked",this.checked)
})

 

转载于:https://my.oschina.net/xiaojunx/blog/858405