使用jQuery操作表单和表格

使用jQuery操作表单元素

1.1、操作文本框

1、获取文本框的值(两种方法)：

	var textCon = $("#id").val();
	var textCon = $("#id").attr("value");

2、设置文本框的值，可以使用attr()方法：

$("#id").attr("value","要设定的值");

3、设置文本框不可编辑的方法：

	$("#id").attr("disabled","disabled");

4、设置文本框可编辑的方法：

	$("#id").removeAttr("disabled");

例如：获取文本框的值以及切换编辑状态

	<input type="text" id="testInput"/>
	<input type="submit" value="提交" name="tj" id="tj"/>
	<input type="button" value="修改" name="xg" id="xg"/>

		<script type="text/javascript">
			$(document).ready(function(){
				$("#tj").click(function(){
					if($("#testInput").val() != ""){
						alert($("#testInput").val());	//弹出文本框的值
						$("#testInput").attr("disabled","disabled");//将文本框变为不可编辑状态
					}else{
						alert("请输入文本内容！")
						$("testInput").focus();			//将焦点设置到文本框处
						return false;
					}
				});
				$("#xg").click(function(){
					if($("#testInput").attr("disabled") == "disabled"){
						$("#testInput").removeAttr("disabled");			//移除文本框的disabled属性
					}
				});
			})
		</script>

操作文本域

文本域的属性设置、值的获取以及编辑状态的修改与文本框都相同。所以在此不做过多赘述。

操作单选按钮和复选框

1、使用attr()方法可以设置选中的单选框和复选框：

	$("#id").attr("checked",true);

2、取消选中单选按钮和复选框：

	$("#id").removeAttr("checked");

3、判断选择状态

	if($("#id").attr("checked")=='checked'){
	}

例如：使用按钮控制单选框的选中状态

		<form>
			<h3 align="center">选择你喜欢的运动</h3>
			<input type="checkbox" name="hobby" value="游泳" />游泳
			<input type="checkbox" name="hobby" value="足球" />足球
			<input type="checkbox" name="hobby" value="篮球" />篮球
			<input type="checkbox" name="hobby" value="滑冰" />滑冰
			<input type="checkbox" name="hobby" value="滑雪" />滑雪
			<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
			<input type="checkbox" name="hobby" value="乒乓球" />乒乓球<br /><br />
			<input type="button" id="checkAll" value="全选"/>&nbsp;
			<input type="button" id="unCheckAll" value="全不选" />&nbsp;
			<input type="button" id="revBtn" value="反选" />&nbsp;
			<input type="button" id="subBtn" value="提交" />&nbsp;
		</form>

	<script type="text/javascript">
		$(document).ready(function(){
			$("#checkAll").click(function(){
				$("input[type=checkbox]").attr("checked",true);
			})
			$("#unCheckAll").click(function(){
				$("input[type=checkbox]").removeAttr("checked");
			})
			
			$("#revBtn").click(function(){
				$("input[type=checkbox]").each(function(){
					this.checked = !this.checked;
				});
			})
			$("#subBtn").click(function(){
				var msg = "你最喜欢的运动是：\r\n";
				$("input[type=checkbox]:checked").each(function(){
					msg+=$(this).val()+"\r\n";
				});
				alert(msg);
			})
		})
	</script>