自己下载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 ></html>
制作人:飞虎 无兄弟不编程!
====================================================
欢迎加QQ群进行更多交流:305397511 专注于php、mysql以及开源框架