多个input的name属性值相同，遍历取值

已于 2022-01-24 00:34:54 修改
阅读量4k 收藏
点赞数 2
分类专栏： HTML5 CSS Jquery 原生JS 的应用 文章标签： name input jquery value
于 2019-07-11 15:53:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42176639/article/details/95485176
版权

分别通过Jquery和Document遍历name值相同的input内容

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>添加用户</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>assets/css/header/header.css">
	<link rel="stylesheet" type="text/css" href="assets/css/table/table.css">
	<script type="text/javascript" src="assets/js/jquery/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
	
		function SubmitAdd(){
			//alert(12345)
			$.ajax({
				type : "POST",
				url : "ajax/AddUser",
				dataType : 'text',
				data : $("#users").serialize(),
				success:function(result){
					//alert(result);
					var arr = result.split(";");
				},
				error:function(){
				
				}
			})
		}
	
		function Check(){
		
			var arr =[];
	        $("input[name='userAccount']").each(function(){
	            arr.push($(this).val());
	            console.log("id："+$(this).attr('id'));
	        })
	        console.log(arr);
			console.log("----华丽的分割线，jquery-----");
			var account = document.getElementsByName("userAccount");//$("input[name='userAccount']");
			for(var i=0;i<account.length;i++){
				//设置背景颜色
				//account[i].style.backgroundColor = 'red';
				console.log(i+"--"+account[i].value);
			}
		}

	
	</script>
  </head>
  
  <body>
  	<div id="all">
		<div id="header"><iframe src="<%=basePath%>pages/menu/menu.jsp"></iframe></div>
	  	<div id="bodyer">
	  		
	  		<div style="position:relative;width:90%;height:60%;padding:4%;">
	  			<form id="users">
		  			<table id="tb">
		  				<tr>
		  				<th style="width:4%;">序号</th>
		  				<th>账号</th>
		  				<th>姓名</th>
		  				<th>密码</th>
		  				<th>权限</th>
		  				<th>电话</th>
		  				<th>邮件</th>
		  				<th>年龄</th>
		  				<th>性别</th>
		  				<th>地址</th>
		  				</tr>
		  				<%for(int i=0;i<10;i++) {%>
		  				<tr>
		  				<td><%=i+1 %></td>
		  				<td><input name="userAccount" id="account<%=i%>"/></td>
		  				<td><input name="userName"/></td>
		  				<td><input name="userPassword"/></td>
		  				<td><input name="userRight"/></td>
		  				<td><input name="userPhone"/></td>
		  				<td><input name="userEmail"/></td>
		  				<td><input name="userAge"/></td>
		  				<td><input name="userSex"/></td>
		  				<td><input name="userAdress"/></td>
		  				</tr>
		  				<%} %>
		  			</table>
	  			</form>
	  			<input type="button" onclick="SubmitAdd()" value="提交" class="submit_btn"/>
	  			<input type="button" onclick="Check()" value="提交" class="submit_btn"/>
	  		</div>
	  	
	  	
	  	
	  	
	  	
	  	
	  	</div>
  	</div>
  	
  </body>
</html>

结果：
在这里插入图片描述

猪悟道
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
将name值一样的input值拼接起来
07-08
如果多个`<input>`元素具有相同的`name`值，那么在提交表单时，浏览器会将这些值以数组的形式发送到服务器。 当需要将这些同名的输入值拼接成一个字符串时，我们可以按照以下步骤进行： 1. **获取元素**：使用...
jquery 通过name快速取值示例
10-26
本篇文章将深入讲解如何使用jQuery通过`name`属性来快速取值，并提供一个实际的示例代码进行解析。 首先，`name`属性在HTML中用于标识不同的表单元素，例如input、select或textarea等，使得我们可以通过这个属性来...
jquery获取多个相同name的input的value值
weixin_44146294的博客
11-25 3763
以下是H5代码以及jQuery代码 <body style="width: 100vw;margin: 0 auto;padding: 0vw;"> <form> 问题1：<input type="text" name="question" /><br> 问题2：<input type="text" name="question" /><br> 问题3：<input type
多个相同name 的 input 输入框 ，验证问题
一朝入魔的博客
11-20 1576
1、核心代码 直接引入一下代码，无需进行修改，就能够解决多个相同name 的验证无效问题。 ##### 注： id 不能相同。 if ($.validator) { $.validator.prototype.elements = function () { var validator = this, rulesCache = {}; ...
表单提交 多个name相同的input
diankui6178的博客
12-11 791
<form action="{:U('Index/test')}" method="post"> <foreach name="div" item="vo"> 组名：<input type="text" value="{$vo.groupName}" name=gp[]><br><br> 用户名：<input t...
获取input中name相同的value值
霖霂晗的专栏
05-22 628
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> 　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <input name="text" value="鞠婧.
js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交
jiankang66的博客
04-29 3628
一、在动态上传章节信息时，碰到了一系列的问题，主要有： 1、动态添加的input元素绑定的事件失效了。 2、提交保存时，多个name相同的表单如何判空并阻断提交。 二、问题界面展示： （1）在这个页面中，第一个form表单，是开始就有了，第二个是点击按钮后动态添加的，它的判断是否为空是无效的。 三、问题出现的原因： 1、为了完成业务，我最初在html中我写了一个form表单，和一个...
jQuery实现获取多选框的值示例
11-20
接着，创建包含多个多选框的 HTML 结构，每个多选框都有一个唯一的 `name` 属性，以便于后续的选择和操作。例如： ```html 苹果:<input type="checkbox" name="id" value="aa"> 香蕉:<input type="checkbox" name=...
JQuery表单元素取值赋值方法总结
10-15
如果需要针对特定组的单选按钮，可以指定`name`属性，如`$("input[name='rd']:checked").val()`。 对于复选框（`<input type="checkbox">`），情况略有不同。如果一个复选框被选中，`val()`将返回其`value`属性的值...
Jquery 表单取值赋值的一些基本操作
10-29
var radioValue = $("input[name='gender']:checked").val(); // 获取下拉列表选中项的值 var selectValue = $("#selCountry").val(); ``` ##### 2. 赋值 同样地，`.val()` 方法也可以用于设置表单元素的值。 **...
jQuery操作复选框(CheckBox)的取值赋值实现代码
11-26
2. **获取多个选中复选框的值**： - 使用循环，例如`$('input:checkbox').each(function() {...})`，遍历所有复选框，检查`$(this).attr('checked')`是否为真，如果为真则显示对应的值。 3. **设置第一个复选框为...
在js中单选框和复选框获取值的方式
10-29
1. **获取同名元素集合**：首先需要获取到所有具有相同`name`属性值的元素集合，这可以通过`document.getElementsByName()`方法实现。 2. **遍历元素集合**：遍历这个元素集合，找到被选中的元素（即`checked`属性为...
jQuery操作CheckBox的方法介绍(选中,取消,取值)
12-10
使用`$("[name='checkbox'][checked]")`选择所有已选中的CheckBox，然后遍历它们，将每个选中项的`value`属性值添加到字符串`str`中，并在每个值之间添加换行符`\n`。最后，通过`alert(str)`显示这些值。 以上就是...
JS获取文本框,下拉框,单选框的值的简单实例
10-26
单选框由`<input type="radio">`定义，它们通过相同的`name`属性实现单选。获取被选中的单选按钮值，可以使用`getElementsByName()`函数，如下所示： ```html <INPUT TYPE="radio" NAME="a" value="1">...
js获取复选框选中项的值
07-04
这是通过`document.getElementsByName("box")`实现的，这行代码返回一个NodeList对象，包含了页面上所有name属性为“box”的`<input type="checkbox">`元素。 #### 步骤2：遍历复选框元素并检查选中状态 接下来，...
name相同的input是个集合
cxzhq2002的杂记
02-08 1377
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档      Response.write(request("checkbox").count)%>Response.write(request("checkbox")(1))%>Response.write(
循环获取多个input标签的值
qq_41610686的博客
11-19 3703
&lt;script&gt; var str = ''; $(".a").each(function(index,element){        str += $(this).val()+','; }); str = str.substr(0,str.length-1);//除去最后一个‘，’； alert(str) &lt;/script&gt;...
Request获取多个相同name的input值的方法
仗键纵码走天涯
04-27 2683
request.getParameterValues("fieldName") 使用上述代码取出数组，然后遍历即可。
前端页面表单提交多个name相同的input框，后台接收方法
热门推荐
自古红蓝出CP的博客
10-18 2万+
一、以字段数组接收 <form action="/user/submitUserList_1" method="post"> ID:<input type="text" name="id"><br/> Username:<input type="text" name="name"><br/> Password:<input type="text" na
js 删除多个相同name属性的标签
最新发布
06-06
如果你需要删除多个具有相同 `name` 属性的标签，可以使用 `querySelectorAll()` 方法来获取这些标签，然后遍历它们并删除指定的元素。 下面是一个示例代码： ```javascript var elements = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猪悟道

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值