jQuery表单控件操作
自己下载jQuery类库(http://docs.jquery.com/Downloading_jQuery)，当前使用版本1.5。
源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQueryForm</title>
<style type="text/css">
body,td{font-size:12px;}
dl{margin:0px; padding:0px;}
dl dt{margin:4px; border:solid 1px #39C; font-weight:bold; line-height:22px;}
dl dd{margin:4px; border:solid 1px #39C; line-height:22px;}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.5.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
//表单提交控制
$("#submit1").click(function(){
if(confirm("Is Submit?")){
$("form1")[0].submit();
}else{
return false;
}
});
//获取Text文件框
$("#button1").click(function(){
$("<dd/>").html("<b>姓名：</b>"+$("#xingming").val()).appendTo($("#msgul"));
$("<dd/>").html("<b>职务：</b>"+$("#zhiwu").val()).appendTo($("#msgul"));
});
//获取爱好选中项文本和值
$("#getaihaotext").click(function(){
$("<dd/>").html("<b>爱好Text：</b>"+$("#aihao option:selected").text()).appendTo("#msgul");
$("<dd/>").html("<b>爱好Value：</b>"+$("#aihao").val()).appendTo("#msgul");
});
//设置Select菜单的选中项
$("#button2").click(function(){
$("#aihao").val("kandianshi");
});
//清空下拉菜单
$("#button3").click(function(){
$("#aihao").empty();
//$("#aihao").html("");
});
//添加下拉菜单选项
$("#button4").click(function(){
if(!ExistRe($("#aihao"),$("#addselectValue").val())){
$("<option>"+$("#addselectText").val()+"</option>").attr("value",$("#addselectValue").val()).appendTo($("#aihao"));
$("#aihao").val($("#addselectValue").val());
}else{alert($("#addselectValue").val()+"，已存在！");}
});
//锁定单选项按钮
$("#button5").click(function(){
var redioJQUERYobj=$("input[id='xinqing']");
/* alert($("input[id='xinqing'][checked]").val());
通过checked属性锁定单选项，在FF和IE上测试失败。
$("#xinqing")
通过相同的ID获取元素的集合对象，在FF和IE上测试失败。
*/
for(var i=0;i<redioJQUERYobj.length;i++){
if(redioJQUERYobj[i].checked){
$("<dd/>").html("<b>单选项：</b>"+redioJQUERYobj[i].value).appendTo($("#msgul"));
}
/*jQuery对象的实现方式
if($(redioJQUERYobj[i]).attr("checked")){
$("<dd/>").html("<b>单选项：</b>"+$(redioJQUERYobj[i]).val()).appendTo($("#msgul"));
}
*/
}
});
//复选项操作
$("#button6").click(function(){
var checkboxList=$("input[name='aidianying']");
for(var i=0;i<checkboxList.length;i++){
if(checkboxList[i].checked){
$("<dd/>").html("<b>我喜欢的电影：</b>"+checkboxList[i].value).appendTo($("#msgul"));
}
}
});
//取消所有选择项
$("#button7").click(function(){
var checkboxList=$("input[name='aidianying']");
for(var i=0;i<checkboxList.length;i++){
$(checkboxList[i]).attr("checked",false);
}
});
//禁用与启用控件
$("#button8").click(function(){
if($("#button5").attr("disabled")){
$("#button5").attr("disabled",false);
$("#button6").attr("disabled",false);
$("#button7").attr("disabled",false);
$("#button8").attr("value","启用上面三个按钮");
}else{
$("#button5").attr("disabled",true);
$("#button6").attr("disabled",true);
$("#button7").attr("disabled",true);
$("#button8").attr("value","禁用上面三个按钮");
}
});
});
function ExistRe(selectObj,selValue){
//alert(selectObj[0].options.length);
//alert(selectObj[0].options[0].text);
//alert(selectObj[0].options[0].value);
var re_value=false;
for(var i=0;i<selectObj[0].options.length;i++){
if(selectObj[0].options[i].value==selValue){re_value=true;}
}
return re_value;
}
</script>
</head>
<body>
<div>
<table border="1">
<form id="form1" method="post" action="#">
<tr><td>姓名：</td><td><input type="text" name="xingming" id="xingming"/></td></tr>
<tr><td>职务：</td><td><input type="text" name="zhiwu" id="zhiwu"/></td></tr>
<tr><td>爱好：</td><td><select id="aihao" name="aihao">
<option value="dushu">读书</option>
<option value="kandianshi">看电视</option>
</select></td></tr>
<tr>
<td>心情：</td>
<td><input name="xinqing" id="xinqing" type="radio" value="gaoxing"/>高兴 <input name="xinqing" id="xinqing" type="radio" value="yumen" />郁闷 <input name="xinqing" id="xinqing" type="radio" value="yiban" />一般 </td></tr>
<tr>
<td>喜欢的电影</td>
<td><input name="aidianying" type="checkbox" value="猛龙过江"/>猛龙过江<input name="aidianying" type="checkbox" value="最强喜事"/>最强喜事<input name="aidianying" type="checkbox" value="功夫熊猫"/>功夫熊猫<input name="aidianying" type="checkbox" value="上海滩"/>上海滩</td>
</tr>
<tr><td colspan="2">
<input type="submit" id="submit1" name="submit1" value="Submit提交表单"/>
<input type="button" id="button1" name="button1" value="获取文本内容"/>
</td></tr>
<tr><td colspan="2">
<div style="border:solid 1px #F00">
<input type="button" id="getaihaotext" name="getaihaotext" value="获取爱好选中项内容"/>
<input type="button" id="button2" name="button2" value="我喜欢看电视"/>
<input type="button" id="button3" name="button3" value="清空下拉菜单"/>
</div>
<div style="border:solid 1px #F00">
<input type="text" id="addselectText" name="addselectText" value="Text"/>
<input type="text" id="addselectValue" name="addselectValue" value="value"/>
<input type="button" id="button4" name="button4" value="添加"/>
</div>
</td></tr>
<tr><td colspan="2">
<input type="button" id="button5" name="button5" value="我的心情"/>
<input type="button" id="button6" value="我喜欢的电影"/>
<input type="button" id="button7" value="取消所有选择电影"/>
</td></tr>
<tr><td>
<input type="button" id="button8" value="禁用上面三个按钮"/>
</td></tr>
</form>
</table>
</div>
<div>
<div style="width:200px; background-color:#F6F6F6; border:solid 1px #999">
<dl id="msgul">
<dt>结果输出窗口</dt>
</dl>
</div>
</div>
</body>
</html>
制作人：飞虎 无兄弟不编程！
====================================================
欢迎加QQ群进行更多交流：305397511 专注于php、mysql以及开源框架
