jquery的表单操作

最新推荐文章于 2023-01-22 07:30:03 发布
最新推荐文章于 2023-01-22 07:30:03 发布
阅读量438 收藏
点赞数
分类专栏： jquery
1 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<style type="text/css">
		.addBg {
			background:#f00;
			color:#fff;
		}
		.bigger {
			font-size:20px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#btn").click(function(){
				//获取表单的值
				//alert($("#username").val());
				
				//设置表单的值
				// $("#username").val("我来了");
				
				//alert($("input[name='password']").val());
				
				//checkbox得到的是一个数组，需要进行遍历
				// $("input[name='interest']:checked").each(function(n){
					// alert($(this).val());
				// });
				
				//checkbox只能传入数组
				//$("input[name='interest']").val(["足球","篮球","羽毛球"]);
				
				// alert($("input[name='sex']:checked").val());
				
				//$("input[name='sex']").val(["1"]);
				// $("input[name='sex'][value='1']").prop("checked","true");
				// alert($("input[name='sex']:checked").val());
				
				//能够获取select的值
				//alert($("#address").val());
				//获取select中的所有文本
				//alert($("#address").text());
				//注意:要一个空格，不让会找select被checked的元素
				//加个空格就是找子元素
				//alert($("#address :checked").text());
				//{username:xx,password:xx,interester:[2,1,],sex:x,address:add}
				$("#address").val(2);
				//作业1:写一个方法可以将表单中的值创建为json-->直接创建为字符串
				//作业2:
			});
		});
		
	</script>
</head>
<body>
	
	<form id="myform">
		用户名：<input type="text" name="username"  id="username"/><br/>
		密    码:<input type="password" name="password" id="password"/><br/>
		用户兴趣:<input type="checkbox" name="interest" value="足球"/>足球
		<input type="checkbox" name="interest" value="篮球"/>蓝球
		<input type="checkbox" name="interest" value="羽毛球"/>羽毛球
		<input type="checkbox" name="interest" value="游泳"/>游泳<br/>
		用户性别:<input type="radio" name="sex" value="0">男
				<input type="radio" name="sex" value="1">女<br/>
		用户户籍:<select name="address" id="address">
				<option value="1">北京</option>
				<option value="2">上海</option>
				<option value="3">昭通</option>
				<option value="4">彝良</option>
		</select>	<br/>
		<input type="button" value="测试数据" id="btn"/>	
	</form>
</body>
</html>

2全选与反选


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<style type="text/css">
		.addBg {
			background:#f00;
			color:#fff;
		}
		.bigger {
			font-size:20px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#all").click(function(){
				if($(this).prop("checked")) {
					//选中
					$("input[type='checkbox']").prop("checked",true);
					$(this).next("span").html("全取消");
				} else {
					$("input[type='checkbox']").prop("checked",false);
					$(this).next("span").html("全选");
				}
			});
			$("#reverse").click(function(){
				var c = $("input[type='checkbox']:not(#all):checked");
				var nc = $("input[type='checkbox']:not(#all):not(:checked)");
				c.prop("checked",false);
				nc.prop("checked",true);
			});
		});
		
	</script>
</head>
<body>
	<input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/>
	<input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/>
	<br/>
	<input type="checkbox" id="all"/><span>全选</span>
	<input type="button" id="reverse" value="反选"/>
</body>
</html>

3 表单转json 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>03_select</title>
	<meta name="author" content="Administrator" />
	<style type="text/css">
		.addBg {
			background:#f00;
			color:#fff;
		}
		.bigger {
			font-size:20px;
		}
	</style>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function() {
			alert($("#myform").serializeArray());
			
			//var j = "{\"username\":[sdfsdf,asdasd],,\"interest\":[足球,篮球,羽毛球],\"sex\":\"1\",\"address\":\"3\"}";
			//var obj = $.parseJSON("{\"username\":[sdfsdf,asdasd],\"password\":\"\",\"interest\":[足球,篮球,羽毛球],\"sex\":\"1\",\"address\":\"3\"}");
			//var obj = $.parseJSON(j);
			//alert(typeof obj.tests);
			$("#btn").click(function(){
				//1、获取所有的input中存在name的值
				var forms = $("#myform :input");
				//2、获取forms中的所有值
				// forms.each(function(n){
					// alert($(this).val());
				// });
				var jsons = "{";
				var adds = new Array();
				forms.each(function(n){
					//1、判断当前的name的表单是否有两个以上如果有两个以上并且不是radio或者checkbox
					//就将组成一个数组来设置值
					var name =$(this).attr("name");
					if(name) {
						if(!checkArray(adds,name)) {
							if(n>0) {
								jsons+=",";
							}
							var val =getValue(this);
							if((typeof val)!="string") {
								if((val instanceof Array)) {
									val="["+val+"]";
								}
								jsons+="\""+$(this).attr("name")+"\":"+$.trim(val)+"";
							} else {
								jsons+="\""+$(this).attr("name")+"\":\""+$.trim(val)+"\"";
							}
							
							adds.push(name);
						}
					}
				});		
				jsons+="}";
				$("#json").html(jsons);
				var obj = $.parseJSON(jsons);
				alert(obj.interest[0]);
			});
			
			function checkArray(ars,value) {
				var result=false;
				for(var i=0;i<ars.length;i++) {
					if(ars[i]==value) {
						return true;
					}
				}
				return result;
			} 
			
			function getValue(obj) {
				var target =$(obj);
				if(!target.is(":radio")&&!target.is(":checkbox")) {
					//判断通过target这个表单的name取出来的值是不是一个数组
					var inputs = $("[name='"+target.attr("name")+"']");
					if(inputs.size()>1) {
						//说明是一个数组
						var as = new Array();
						inputs.each(function(n){
							as.push("\""+$(this).val()+"\"");
						});
						return as;
					} else {
						return inputs.val();
					}
				} else {
					var vals = $("input[name='"+target.attr("name")+"']:checked");
					if(vals.length>1) {
						var as = new Array();
						$(vals).each(function(n){
							as.push("\""+$(this).val()+"\"");
						});
						return as;
					} else {
						return vals.val();
					}
				}
			}
		});
		
	</script>
</head>
<body>
	
	<form id="myform">
		用户名：<input type="text" name="username"  id="username"/><input type="text" name="username"  id="username"/><br/>
		密    码:<input type="password" name="password" id="password"/><br/>
		地址:<input type="text" name="address" id="address"/><br/>
		用户兴趣:<input type="checkbox" name="interest" value="足球"/>足球
		<input type="checkbox" name="interest" value="篮球"/>蓝球
		<input type="checkbox" name="interest" value="羽毛球"/>羽毛球
		<input type="checkbox" name="interest" value="游泳"/>游泳<br/>
		用户性别:<input type="radio" name="sex" value="0">男
				<input type="radio" name="sex" value="1">女<br/>
		用户户籍:<select name="address" id="address">
				<option value="1">北京</option>
				<option value="2">上海</option>
				<option value="3">昭通</option>
				<option value="4">彝良</option>
		</select>	<br/>
		<input type="button" value="测试数据" id="btn"/>	
	</form>
	<div id="json"></div>
</body>
</html>


wenzhu0_0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML实例之表单
qq_43131852的博客
09-25 310
参考https://www.w3school.com.cn/html/index.asp 文本域(Text fields) <html> <body> <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastnam...
jquery操作表格
wyqwilliam的博客
12-15 417
<html> <head> <title>jQuery操作表格</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> tr{ height: 40px; } </style&g...
HTML网页设计基础笔记 • 【第3章 表单】
热门推荐
杨明金的博客
03-21 2万+
3.1 表单 3.1.1 表单概述 在遨游网络世界时，我们除了浏览网页信息，有时还需要将一些数据输入到网页中，经过网页提交至服务器。例如，我们登录邮箱时，需要输入用户名和密码。注册网站的用户时需要输入用户的信息，用户输入到网页中的信息均通过表单中的各表单元素来接收，然后传递给服务器。 表单在网页开发中很常见，典型的应用场景有以下几种： 网站的登录、注册。 填写订单信息。 填...
HTML进阶，表单，媒体
hanjialiang97的博客
10-20 226
表单： form> 元素定义 HTML 表单： HTML 表单包含表单元素。 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 input> 元素 input> 元素是最重要的表单元素。 input> 元素有很多形态，根据不同的 type 属性。 input type=“text”> 定义用于文本输入的单行输入字段 类型 描述 单选按钮输入 input type=“radio”> 定义单选按钮。 提交按钮 input type=“submit”
HTML学习笔记
weixin_48373085的博客
01-22 402
HTML标签
HTML:表单form
weixin_68375611的博客
03-23 728
form：文档区域，此区域包含交互控件，用于向 Web 服务器提交信息。 <body> <form action=""></form> </body> action:可以传入地址，也可删除 <body> <form> <label for="username">用户名</label> <input type="text" name="iddd
jQuery对表单的操作
ChibiMarukoChan的博客
06-24 560
表单应用 1.单行文本框应用 初始化网页，样式如下： <form> <fieldset> <legend>个人基本信息</legend> <div class="col-line"> <label>名称：</label&g...
Java Web Jquery表单验证
最新发布
07-26
Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write.html、end.html、style.css。 1...
jquery对表单操作2
10-28
jquery对表单操作2，最近几篇整理都是jquery表格操作相关，大家可以收藏下。
jQuery对表单的操作代码集合
01-19
改变文本框的获得焦点的样式 代码如下: <form action=”#” method=”POST” id=”regForm”> <fieldset> 个人基本信息</legend> <div> ”username”>名称：</label> <input id=”username” type=”text”...
jquery常用的表单操作很全很详细.rtf
03-21
jquery常用的表单操作很全很详细.rtf
jQuery常见的表单操作
11-21
工作中常用的jQuery表单操作：$("input[name='checkbox_name'][checked]"); //选择被选中CheckBox元素的集合 $("#checkbox_id").attr("checked",true);设置一个CheckBox的状态为选中
jQuery表单验证
10-29
在开始讨论jQuery表单验证之前，我们需要对jQuery有一个基本的理解。jQuery是由John Resig创建的一个JavaScript库，它的核心特性是提供了一种简单的方式来处理HTML文档、事件处理、动画和Ajax交互。通过使用jQuery，...
10个超棒jQuery表单操作代码片段
07-09
【jQuery表单操作】jQuery作为一个强大的JavaScript库，极大地简化了前端开发，特别是在处理表单交互时。以下将详细解析给出的四个代码片段，这些代码片段旨在优化和控制表单的行为。 1. **禁止通过回车键提交表单*...
HTML表单和输入
余月初贰的博客
05-17 2837
HTML 表单用于收集用户的输入信息。 以下是实例 <form action=""> 用户名: <input type="text" name="name"><br> 密码: <input type="text" name="mm"> </form> 上面的实例中包含两个普通输入框 <form action=""> 用户名: <input type="text" name="user"><br> 密码
获取html中type="text"中的值,jquery获取input type=text中的值的各种方式
weixin_33321637的博客
07-14 1008
下面小编就为大家带来一篇jquery获取input type=text中的值的各种方式(总结)。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧实例如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml>JQuery获取文本框的值//使用id的方式获取$(document).ready(function(){//1$("#b...
jQuery中form表单基本使用
idiot_MAN的博客
09-06 1440
表单在网页中主要负责数据采集的功能，HTML中的form标签，主要用于采集用户输入的信息，并通过form标签的提交操作，把采集到的信息提交到服务器端进行处理。
浏览器记住密码--原理/不记住密码的方法
IT利刃出鞘的博客
12-11 2639
本文介绍浏览器是如何自动跳出保存密码的提示的，并介绍如何让浏览器不自动跳出保存密码的提示的方法。
AJax入门案例（代码实现）
m0_58969296的博客
09-23 1656
Ajax入门案例代码实现
jQuery表单操作与Ajax技巧详解
本资源详细介绍了jQuery在处理表单元素操作中的关键技能，特别是与下拉菜单（select）交互的部分。首先，它讲述了如何获取和设置下拉菜单（select）的选中项文本，通过`$("#select option[selected]").text()`获取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值