如何在单击submit按钮时获得所有动态选中的复选框以及文本框值？
在单击submit按钮时获得所有动态选中的复选框以及文本框值，可以通过以下步骤实现：
- 在HTML中，为每个复选框和文本框设置一个唯一的标识符（ID）或者使用类名来标识它们。
- 使用JavaScript来获取所有选中的复选框和文本框的值。可以通过以下步骤实现：
- 获取所有复选框的值：
- 使用
document.querySelectorAll()方法选择所有复选框的元素。 - 使用
Array.from()方法将返回的NodeList转换为数组。 - 使用
Array.prototype.filter()方法过滤出选中的复选框。 - 使用
Array.prototype.map()方法获取选中复选框的值。
- 使用
- 获取所有文本框的值：
- 使用
document.querySelectorAll()方法选择所有文本框的元素。 - 使用
Array.from()方法将返回的NodeList转换为数组。 - 使用
Array.prototype.map()方法获取文本框的值。
- 使用
- 获取所有复选框的值：
- 将获取到的复选框和文本框的值进行处理或发送到服务器。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>获取选中复选框和文本框的值</title>
</head>
<body>
<form id="myForm">
<input type="checkbox" id="checkbox1" value="选项1">选项1<br>
<input type="checkbox" id="checkbox2" value="选项2">选项2<br>
<input type="checkbox" id="checkbox3" value="选项3">选项3<br>
<input type="text" id="textbox1" value="文本框1"><br>
<input type="text" id="textbox2" value="文本框2"><br>
<input type="text" id="textbox3" value="文本框3"><br>
<input type="submit" value="提交" onclick="getSelectedValues()">
</form>
<script>
function getSelectedValues() {
// 获取选中的复选框的值
var checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]'));
var selectedCheckboxes = checkboxes.filter(function(checkbox) {
return checkbox.checked;
});
var selectedCheckboxValues = selectedCheckboxes.map(function(checkbox) {
return checkbox.value;
});
// 获取文本框的值
var textboxes = Array.from(document.querySelectorAll('input[type="text"]'));
var textboxValues = textboxes.map(function(textbox) {
return textbox.value;
});
// 处理获取到的值或发送到服务器
console.log('选中的复选框的值:', selectedCheckboxValues);
console.log('文本框的值:', textboxValues);
}
</script>
</body>
</html>在上述示例中，当点击submit按钮时，会调用getSelectedValues()函数来获取选中的复选框和文本框的值，并将其打印到浏览器的控制台中。你可以根据实际需求对获取到的值进行进一步处理或发送到服务器。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBC）：https://cloud.tencent.com/product/tbc
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
有一个动态生成的复选框列表。每个复选框旁边都有一个输入框。 如何在单击submit按钮时获得所有动态选中的复选框以及文本框值？创建复选框 function addCheckbox(name) {
var container = $('#cbl
浏览 48提问于2021-09-19得票数 0
1回答
我显示的文本列表与提交按钮在每一行称为“编辑”。但是，如果他们只想编辑一个文本，那么就没有必要选中复选框。如果用户不选中任何复选框，如何处理。
例如，用户想要编辑公寓，他点击“编辑”按钮
浏览 2提问于2014-12-03得票数 0
回答已采纳
1回答
后按钮上的Jquery更新
、、、、
input id=\"addtpcs"+a+"\" type=\"text\"/></dd>")); }我在一个表单中有一个选择框(名为addtpcs)，它已经加载到包含数字的页面上( 1,2,3,4等)形式的。上面的代码非常适合根据选中框中选择的数字动态添加输入type=text框。但是，在单击submit按钮，
浏览 3提问于2014-01-21得票数 1
回答已采纳
现在，我在获取的每个值上都有一个复选框和一个输入字段，我有一个按钮updateALL，我想要的是我在输入字段中插入的值应该通过单击选中其复选框的updateAll按钮来更新。并选中所有复选框，并更新输入字段值。我有来自api的json格式的数据，如
[{id
浏览 1提问于2019-07-09得票数 0
回答已采纳
无论何时单击它，都会显示一个新页面，其中包含id、name、price等数据以及带有复选框的选择选项。此页面还包含一个按钮。所有这些细节(id、name、price)都是从一个表中获取的。如果选中该复选框并单击该按钮，则应显示一个包含所选值的新页面，以及每个id的文本框。如果在这些文本框中输入
浏览 1提问于2010-07-22得票数 0
2回答
MVS2010MVC 3:我有一个提交页面，它有几个复选框，这些复选框是在页面加载时动态构建的。用户可以在提交表单之前选中一个或多个复选框。在页面的右侧，有用户以前选择的所有选项的摘要。摘要可从提交页面获得，并将传递到其他页面。在页面的最顶部有一个“添加评论”按钮。当用户单击它时，将显示一个带有文本框的弹出窗口
浏览 0提问于2013-05-21得票数 1
回答已采纳
如何通过jquery动态添加和删除组件？我想在我的页面上单击添加添加一行，然后在该行中将有新的文本框和删除时单击删除按钮在我的页面上选中复选框行必须已删除其组件，如文本框
我该如何处理jquery？
浏览 2提问于2010-11-03得票数 0
回答已采纳
1回答
嗨，我有下面的复选框，当工具提示显示时，这个复选框应该会变成红色边框。当未选中复选框时，工具提示将在单击“提交”按钮时显示。因此，我想向用户显示此复选框的红色边框。
单击submit按钮后，html如下所示。在显示工具
浏览 5提问于2022-10-17得票数 1
我正在尝试创建一个类似于下面的javascript函数，只是当用户单击submit按钮时，它将遍历所有的复选框：this.setAttributeelse{ this.setAttribute('changed', 'no');
浏览 0提问于2014-03-06得票数 0
我有一个asp.net页面，其中有两个控件，一个占位符和一个提交按钮。在Page_Load期间，我动态地创建一个任务清单。每一行由一个描述、指向教程的链接和一个复选框组成。行中的所有信息都保存在数据库中。如果数据库表示已检查该任务，则代码将选中的属性设置为true。我遇到的问题是，当单击submit按钮时，我无法找到页面上所有复选框</e
浏览 5提问于2015-05-13得票数 0
我有一个按钮、一个问题和多个checkBoxes，动态地使用如下所示的for循环创建
这就是我如何获得所有数据，以及如何创建问题以及checkBoxesJSONArray jsonArrayInteger.parseInt(id)); mLinearLayout.addView(checkBox);
}
现在我的主要目标是，如果我检查了是每日框，然后<e
浏览 4提问于2017-04-16得票数 1
我是ASP.NET MVC的新手。我正在使用localhost来创建我的ASP.NET MVC项目。我正在使用.NET Framework3.5和MVC1.0以及Visual 2008进行开发。Server 2008是我目前创建数据库的地方。1)在第一页中，我有用户名和密码文本框字段。我有个提交按钮。在单击submit按钮时，我希望首先使用SHA-1散列散列密码，然后将哈希
浏览 3提问于2011-12-04得票数 1
回答已采纳
1回答
在我的应用程序中，我将打印一些文档以及一些复选框(一些复选框在页面加载时会被默认选中)。现在我的要求是我想要未选中的复选框值.例如：
当页面第一次加载时，默认情况下会从大约700个复选框中选中5个复选框；
浏览 3提问于2014-02-16得票数 2
我正在做一个测试应用程序，遇到了一个基本的问题，我想实现一个复选框，如果两个答案都是正确的，那么分数应该被更新，我不知道把代码放在哪里。基本上，这是应用程序应该如何工作，总问题5，每个包含2分，三个MCQ，其中一个是正确的，第四个问题的两个答案都是正确的，所以我们添加复选框，每个复选框带有一个分数，然后editText字段，让用户可以添加自己的评论，在所有的问题都由用户回答后，然后，然后，只有当点击提交按钮<
浏览 2提问于2018-04-25得票数 0
1回答
我有一个updatepanel，里面有一堆动态生成的东西。稍后，当我点击“保存”时，我得到了这些值。文本框值是我在单击保存按钮之前键入的值，但无论我
浏览 0提问于2009-10-06得票数 0
回答已采纳
如何在选中时获得复选框的值？我的问题是，在我的<input>中，我几乎有一个ng模型来处理其他的东西。
我希望收集数据，以便当用户单击submit时，我可以获得复选框的值。
浏览 0提问于2014-06-22得票数 0
回答已采纳
2回答
当屏幕加载和更改一个文本框时，我有一些禁用的复选框，复选框被自动选中，我希望在表单提交期间将复选框值提交给我的后台bean，因此我通过Jquery向submit按钮附加了onclick函数，以便在提交时启用复选框，但仍然没有提交值，但是如果我直接向submit按钮的单击中添加
浏览 0提问于2014-01-10得票数 1
回答已采纳
如何在提交页面前单击提交按钮获取javascript中的jsf值函数验证(Form){ alert(form'f1:radio1'.value)；}
浏览 2提问于2011-05-26得票数 0
2回答
我有一个数据集，每一行都有一个复选框。而且，每一行中的每个字段都可以被更新。单击“提交”按钮时，应更新所有数据。我需要这些复选框来更新数据库中的布尔值(或者bool类型用于sql server的类型)。
如何实现复选框以便能够通过单击submit按钮来更新DB？中的
浏览 2提问于2011-10-04得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
