<!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>
分享到：
相关推荐
本文将深入探讨“jquery操作表单案例”中的关键知识点，包括输入元素(input)、文本区域(textarea)、单选按钮(radio)、复选框(checkbox)以及选择列表(select)的操作，特别是如何根据选择列表的文本值(text)来选定选项...
本示例“jQuery复制移除表单元素代码”是基于jQuery 1.7.2版本实现的功能，这个版本在当时是相当稳定且广泛使用的。 1. **jQuery库的引入**：描述中提到的`jquery.1.7.2.min.js`是jQuery的核心库文件，它的引入使得...
在本篇内容中，我们将详细探讨如何使用jQuery来获取form表单中input元素的值，包括文本框、复选框、单选按钮等不同类型input元素的值获取方法。通过jQuery提供的val()方法和attr()方法，我们可以轻松获取或设置input...
在前端开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本资源“jQuery复制表单元素代码.zip”聚焦于如何使用jQuery实现表单元素的复制功能，这对于动态创建...
jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write.html、end.html、style.css。 1、硬件要求：计算机一台 2...
通过添加特定的class或者ID，我们可以用jQuery选择这些元素并进行后续的美化操作。 接下来，`css`目录下的文件通常包含CSS样式表，这是实现表单美化的主要手段。我们可以定义自定义的样式规则，例如改变表单元素的...
本资源"jQuery表单元素动态增加删除代码.zip"聚焦于一个特定的应用场景：通过jQuery实现表单元素的动态添加与删除功能。这种功能在现代Web应用中非常常见，例如在线表单填写、购物车管理等，它允许用户根据需要...
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表单元素美化插件jqtransform是一个强大的工具，能够帮助开发者轻松实现表单界面的美化，提高网站或应用程序的用户体验。通过其简洁的API和高度可定制性，开发者可以快速地打造出符合现代设计标准的...
在本主题中，我们将深入探讨"jQuery动态表单"这一功能，它允许我们在网页上动态地创建、修改和删除表单元素，极大地提高了用户界面的交互性和灵活性。 动态表单是Web开发中的一个重要概念，尤其是在需要用户输入不...
jQuery UI表单设计器通过拖放功能、预定义的控件模板以及自定义样式选项，极大地提高了表单构建的效率。开发者可以通过这个工具直观地构建复杂的表单结构，包括各种输入类型（如文本、密码、复选框、单选按钮、下拉...
1. **选择器与DOM操作**：利用JQuery的选择器，如`$("#myForm")`，选取表单元素，然后使用`.find()`或直接使用类名、ID等选择表单字段，如`$("#username"), $("#email")`等。 2. **事件绑定**：使用`.on()`方法绑定...
综上所述，通过上述知识点，我们可以看到如何通过简单的jQuery代码实现表单元素的禁用操作。这种操作在很多场景下都可能会用到，比如在用户未填写必填项、表单提交过程中、用户没有达到一定权限等情况下。掌握这些...
jQuery作为一款强大的JavaScript库，极大地简化了DOM操作，使得创建动态、交互性强的表单变得轻而易举。本教程将深入探讨如何利用jQuery实现自定义表单，并通过拖拽形式生成表单代码，同时包含验证功能，旨在帮助...
确保引入了最新的jQuery版本，以便利用其强大的DOM操作和事件处理能力。 其次，`myvalidate.js`可能是你自定义的验证规则或扩展，它允许你根据项目需求定制验证逻辑。例如，你可以创建新的验证方法，或者修改已有的...
"jQuery聚焦表单高亮"这个主题关注的就是如何利用jQuery库来优化表单元素的交互体验，尤其是当用户焦点切换到表单字段时，通过视觉上的高亮提示，提升用户的感知度和操作效率。jQuery是一个强大的JavaScript库，它...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的使用，尤其是在处理DOM操作、事件处理和动画效果方面。"jquery表单验证特效"这个主题涉及到使用jQuery进行表单验证，这是一种提高...
总的来说，jQuery Validate插件以其灵活性和易用性，极大地简化了前端表单验证的工作。通过理解并熟练掌握它的各种规则、方法和配置，开发者可以构建出高效、用户体验良好的表单验证系统。在实际项目中，根据具体...