使用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="全选"/>
<input type="button" id="unCheckAll" value="全不选" />
<input type="button" id="revBtn" value="反选" />
<input type="button" id="subBtn" value="提交" />
</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>