<!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=gbk" />
<title>JQuery操作表单大荟萃</title>
<script src="jquery.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
//得到输入框值
$("#inputButton1").click(function(){
alert($("#input1").val());
});
//选中输入框值
$("#inputButton2").click(function(){
$("#input1").select();
});
//输入框禁用-启用
$("#inputButton3").click(function(){
if($(this).html()=='禁用'){
$("#input1").attr('disabled',true);
$(this).html('启用');
}else {
$("#input1").attr('disabled',false);
$(this).html('禁用');
}
});
//输入框只读
$("#inputButton4").click(function(){
if($(this).html()=='只读'){
$("#input1").attr('readonly',true);
$(this).html('非只读');
}else {
$("#input1").attr('readonly',false);
$(this).html('只读');
}
});
//多选框取值
$("#boxButton1").click(function(){
$("input[type=checkbox][name=box]:checked").each(function(i,obj){
alert(obj.value);
});
});
//选中：中国
$("#boxButton2").click(function(){
$("input[type=checkbox][name=box][value=中国]").attr('checked',true);
});
//清空多选框
$("#boxButton3").click(function(){
if($(this).html()=='全选'){
$("input[type=checkbox][name=box]").attr('checked',true);
$(this).html('全不选');
}else {
$("input[type=checkbox][name=box]:checked").removeAttr("checked");
$(this).html('全选');
}
});
//多选框反选
$("#boxButton4").click(function(){
$("input[type=checkbox][name=box]").each(function(i,obj){
$(this).attr('checked',!$(this).attr('checked')==true);
});
});
//单选框取值
$("#radioButton1").click(function(){
$("input[type=radio][name=sex]:checked").each(function(i,obj){
alert(obj.value);
});
});
//选中：男
$("#radioButton2").click(function(){
$("input[type=radio][name=sex][value=男]").attr('checked',true);
});
//下拉框取值
$("#selectButton1").click(function(){
alert($("#sel").val());
});
//选中：ih99.com
$("#selectButton2").click(function(){
$("#sel").val('ih99.com');
});
//多选下拉框取值
$("#smButton1").click(function(){
alert($("#selMultiple").val());
});
//多选下拉框选中：ih99.com
$("#smButton2").click(function(){
$("#selMultiple").val('ih99.com');
});
//多选下拉框全选
$("#smButton3").click(function(){
if($(this).html()=='全选'){
$("#selMultiple option").attr('selected',true);
$(this).html('全不选');
}else {
$("#selMultiple option").removeAttr("selected");
$(this).html('全选');
}
});
//多选框反选
$("#smButton4").click(function(){
$("#selMultiple option").each(function(i,obj){
$(this).attr('selected',!$(this).attr('selected')==true);
});
});
//清空下拉框
$("#smButton5").click(function(){
$("#selMultiple").empty();
});
//添加下拉框
$("#smButton6").click(function(){
$("<option value='xgz'>许国柱</option>").appendTo("#selMultiple");
});
//删除下拉框
$("#smButton7").click(function(){
$("#selMultiple option:selected").each(function(i,obj){
$(this).remove();
});
});
});
</script>
<style type="text/css">
<!--
.opTable {BORDER-RIGHT: #183789 1px solid; BORDER-TOP: #183789 1px solid; BORDER-LEFT: #183789 1px solid; BORDER-BOTTOM: #183789 1px solid; BACKGROUND-COLOR: #FFFFFF}
.opTable TR TH{
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BACKGROUND: #F1F3F5; PADDING-BOTTOM: 3px; background-color:#0099FF; PADDING-TOP: 3px;font-size:14px;
}
.opTable TR TD{
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BACKGROUND: #F1F3F5; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
-->
</style>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" class="opTable">
<tr>
<th colspan="3">JQuery操作表单大荟萃</th>
</tr>
<tr>
<td>输入框</td>
<td width='300px'><input type="text" value="ih99.com" id="input1" /></td>
<td><button id="inputButton1">取值</button>
<button id="inputButton2">选中</button>
<button id="inputButton3">禁用</button>
<button id="inputButton4">只读</button>
</td>
</tr>
<tr>
<td>复选框</td>
<td>
<input type="checkbox" name="box" value="中国" id="1" />
<label for="1">中国</label>
<input type="checkbox" name="box" value="国外" id="2" />
<label for="2">国外</label>
</td>
<td>
<button id="boxButton1">取值</button>
<button id="boxButton2">选中:中国</button>
<button id="boxButton3">全选</button>
<button id="boxButton4">反选</button>
</td>
</tr>
<tr>
<td>单选框</td>
<td>
<input type="radio" name="sex" value="男" id="3"/><label for="3">男</label>
<input name="sex" type="radio" id="4" value="女"/><label for="4">女</label>
</td>
<td>
<button id="radioButton1">取值</button>
<button id="radioButton2">选中:男</button>
</td>
</tr>
<tr>
<td>下拉框(单选)</td>
<td>
<select name="select" id="sel">
<option value="白沟易寻网">白沟易寻网</option>
<option value="www.ih99.com">www.ih99.com</option>
<option value="ih99.com">ih99.com</option>
</select>
</td>
<td>
<button id="selectButton1">取值</button>
<button id="selectButton2">选中:ih99.com</button>
</td>
</tr>
<tr>
<td>下拉框(多选)</td>
<td>
<select name="selectMultiple" size="5" multiple="multiple" id="selMultiple">
<option value="白沟易寻网">白沟易寻网</option>
<option value="www.ih99.com">www.ih99.com</option>
<option value="ih99.com">ih99.com</option>
</select>
</td>
<td>
<button id="smButton1">取值</button>
<button id="smButton2">选中:ih99.com</button>
<button id="smButton3">全选</button>
<button id="smButton4">反选</button>
<button id="smButton5">清空</button>
<button id="smButton6">添加</button>
<button id="smButton7">删除</button>
</td>
</tr>
</table>
<p>请自备jQuery文件，放在本文件同目录下即可！</p>
转载时请指明出处！谢谢！
</body>
</html>
分享到：
相关推荐
*获得TEXT.AREATEXT的值*/
jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write.html、end.html、style.css。 1、硬件要求：计算机一台 2...
比较全面的讲解了jquery获取表单值，全面的讲解了jquery获取表单值
jQuery复制表单元素代码.zip
jQuery复制移除表单元素代码基于jquery.1.7.2.min.js制作，可复制移除相同表单。
jQuery 操作 Form 元素 v1.0 for jQuery1.4.2，IE7/FF3.6.2下测试通过 作者：西安 网眼 博客：http://blog.why100000.com 微博：http://t.qq.com/zhangking 西安PHP教育培训中心 2010-6-20
下面小编就为大家带来一篇jquery获取form表单input元素值的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JQuery添加删除表单元素代码是一款基于jquery.dynamic-rows插件实现的表单添加删除特效代码
jquery表单元素取值 很实用 强大
jQuery表单元素美化插件,jQuery表单元素美化插件,jQuery表单元素美化插件,jQuery表单元素美化插件,jQuery表单元素美化插件
包括最常用的表单操作，取值赋值清空，比较实用，比较简单。包括input,textarea,radio,checkbox,select.另外根据select的文本值text来让select选中。
jQuery+CSS3网页表单元素美化代码是一款在原生HTML表单的基础上进行美化，并使用jQuery来制作label动画效果，通常用于美化联系方式表单。
jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证
jquery表单验证插件
自做的一个简单的表单验证 jquery validate 表单验证 jquery validate 表单验证
jQuery复制表单元素代码添加tr ,递交信息，有时候页面只需要显示已行，但可能有时候要添加无限个input 来填写，这个就非常的简单明了
工作中常用的jQuery表单操作：$("input[name='checkbox_name'][checked]"); //选择被选中CheckBox元素的集合 $("#checkbox_id").attr("checked",true);设置一个CheckBox的状态为选中
jQuery表单元素动态增加删除代码是一款基于addel.js插件实现的动态表单增删特效。
使用Selenium自带的API操作Select元素时页面可能出现上移或遮挡，导致元素操作失败； 介于此问题，可以使用JQuery来操作Select元素，具体实现见附件。