如何将多个复选框值从一个文件显示到文本框中
将多个复选框值从一个文件显示到文本框中，可以通过以下步骤实现：
- 创建一个HTML页面，包含多个复选框和一个文本框，可以使用
<input type="checkbox">和<input type="text">标签来创建复选框和文本框。 - 在JavaScript中，使用事件监听器来监听复选框的状态变化。当复选框的状态发生变化时，触发一个函数。
- 在触发的函数中，遍历所有的复选框，判断哪些复选框被选中。可以使用
document.querySelectorAll('input[type="checkbox"]')来获取所有的复选框元素，然后使用forEach方法遍历。 - 对于被选中的复选框，将其值添加到一个数组中。
- 将数组中的值使用逗号分隔，并将结果赋给文本框的值属性，即可将多个复选框的值显示在文本框中。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>显示复选框值到文本框</title>
</head>
<body>
<input type="checkbox" value="选项1">选项1<br>
<input type="checkbox" value="选项2">选项2<br>
<input type="checkbox" value="选项3">选项3<br>
<input type="checkbox" value="选项4">选项4<br>
<input type="text" id="result" readonly>
<script>
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const resultTextbox = document.getElementById('result');
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
const selectedValues = [];
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
selectedValues.push(checkbox.value);
}
});
resultTextbox.value = selectedValues.join(', ');
});
});
</script>
</body>
</html>这段代码创建了四个复选框和一个文本框。当复选框的状态发生变化时，触发了一个事件监听器。事件监听器中遍历所有复选框，将被选中的复选框的值添加到一个数组中，并将数组中的值使用逗号分隔后赋给文本框的值属性。这样，选中的复选框的值就会显示在文本框中。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生容器服务（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
- 腾讯区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
我有一个或多个文本框，当第一个文本框更改时，我需要将值复制到其他文本框中。它们是动态创建的，所以它可以是任意数量的文本框。这里是文本框的html标记：
<input type="text" name="PreviousQuotePrice@(Model.SanQuoteLineKey)" class="PreviousQuotePriceid=
浏览 0提问于2013-05-01得票数 0
回答已采纳
我有两个文件，假设是1.php和2.php 1.php是我的抓取数据，所以它包含 echo '<tr onclick="javascript:showRow(this);">';function showRow(row)
浏览 16提问于2019-04-21得票数 2
回答已采纳
[1]: https://i.stack.imgur.com/UhtGJ.png在activity_main.xml中，
浏览 2提问于2021-01-06得票数 0
回答已采纳
1回答
我目前正在做一个项目，使memo自动化。 我想知道如何将多个复选框结果显示为一个复选框 请看下面的截图示例 ?如果我选中狗，猫和老鼠复选框，它应该在文本框中分别显示为狗，猫，老鼠，或者，如果我取消选中其中一个复选框，它不会在文本框中显示 非常感谢你的帮助
浏览 10提问于2019-02-23得票数 0
我对jsp页面有个问题。我不知道如何将一个字段值从一个文本框传递到另一个文本框。使用JavaScript，它非常容易，因为我可以使用Document.getElementID。请帮帮我。我想让你知道我想要实现的目标如下：
根据复选框的值，我将设置布尔标志，该标志将存储在同一<
浏览 4提问于2013-11-21得票数 0
3回答
我将datatable绑定到一个gridview控件，当我格式化每个列时，我需要根据该列是否具有特定的自定义属性来格式化数据。在这种情况下，列可以表示：
单选按钮(在这种情况下，我根据列的基础数据值是1还是0显示" on“或"
浏览 8提问于2008-11-07得票数 1
回答已采纳
我有个链接。无论何时单击它，都会显示一个新页面，其中包含id、name、price等数据以及带有复选框的选择选项。此页面还包含一个按钮。所有这些细节(id、name、price)都是从一个表中获取的。如果选中该复选框并单击该按钮，则应显示一个包含所选值的新页面，以及每个id的文本框。如果在这些文本框中输入值并单
浏览 1提问于2010-07-22得票数 0
1回答
我想知道是否有特定的代码可以将复选框的值传输到选中复选框时位于同一用户窗体上的文本框。基本上，不需要键入所有的单词，只需选中一系列框来创建句子会更容易。我知道如何将复选框值输入到Excel工作表中，但我还不知道如何将相同的值输入到文本框中，该文本框将提供句子的“预览”以供编辑，然后一旦数据在用户表单中获得批准，
浏览 0提问于2018-07-11得票数 1
我将一个jobtype值列表绑定到一个网格视图，每一行都有sno、jobtype、复选框和一个文本框。选中复选框后，文本框将启用，我必须输入一些值(如费用)。在这里我可以选中多个工作类型，然后在文本框中输入费用，最后保存这些值(工作类型，费用)。我成功绑定了数据，但是如何从每行的文本框中获取输入的值</
浏览 0提问于2017-03-20得票数 0
我通过使用查询字符串从一个页面获得另一个页面的值，然后得到id=10，所以我抛出了这个值，我只需要将10传递到文本框，如何传递这个值。当我这样吃的时候我的文本框值它显示id=10，但我只需要值10，如何将这个值传递给文本框</e
浏览 0提问于2017-04-19得票数 1
回答已采纳
因此，我看到了一个来自Vue的Docs 的多个复选框的简单示例。将每个选中复选框的值添加到绑定数组中，这很好。然而，对于我正在构建的应用程序，我需要类似的功能，但我希望能够在相应的文本框中显示复选框的值。
我要找的是，每个选中的复选框的值都应该显示在相应的文本框中，就在它下面。N.B:，我有一个</e
浏览 1提问于2016-08-16得票数 0
回答已采纳
让我们考虑一下，我有一个文本框，在这个文本框中，我可以输入用逗号分隔的用户名。我有一个文本框和一个search_button。当我单击搜索框列表时，当用户单击复选框并单击提交相应的用户名将显示在文本框上时，用户列表将显示在弹出窗口中，并在附近的复选框中显示。我的问题是：需要存储我单击的复选框的每个值，
浏览 3提问于2011-08-25得票数 1
2回答
如果复选框处于选中状态，我将尝试将文本从一个文本框发送到另一个文本框。字段是在两个不同的XAML文件中创建的。第一个XAML文件(InvolvedPersonStackPanel)包含复选框和文本框：如果选中此复选框，则应将涉及人员文本框中的文本复制到在不同XAML文件</
浏览 5提问于2014-09-20得票数 0
目前，这只是一个程序的概念，但让我写下一个程序的简单流程：
也就是说，content1和content2都存在于组合框和单选按钮中</e
浏览 0提问于2018-05-24得票数 0
回答已采纳
我有一个在10个平台(奴隶)上执行的作业，但是当我触发作业并看到它的控制台输出时，我看到一条日志消息说：Building remotely on <slaveTriggering slave10
上述消息中的slave是来自这10位从机中的任何一台机器，有时是与此作业无关的任何其他从机。如何在Jenkins中选择一个slave来在所有目标奴隶上触发构建？
浏览 0提问于2014-08-14得票数 0
回答已采纳
我用VB.net编写了一个程序，它有多个带值的文本框(从一个INI文件中读取)。我已经添加了一个包含完整INI文件的richtextbox，这样人们就可以直接编辑它，而不需要使用文本框。是否可以使用添加到文本框中的值来更新richtextbox？是否可以使用richtextbox中的值更新文本框？这是我用来<e
浏览 1提问于2013-11-17得票数 0
我使用这个javascript代码将字段值复制到另一个字段。当我们只喜欢在下拉列表中使用复选框时，我们必须单击复选框，然后将值复制到文本框中。 $("select").multiselect
浏览 3提问于2014-04-06得票数 0
回答已采纳
嗨，伙计们，任何人都可以告诉我如何将字段值复制到另一个字段，当我们喜欢在下拉列表中使用复选框时，我们必须单击复选框，然后在文本框中进行值复制。当我们有选择复选框值移动在文本框自动。我正在使用MultiSelect Dropdwon列表，当我选择复选框值(如选项1或2)时，我需要它，在文本框中自动移动下面的文本框
浏览 3提问于2014-04-06得票数 0
回答已采纳
我需要在文本框中提取多选检查表的值，可以这样做吗？我尝试使用多个检查表值从数据源中提取它，手动键入多个检查表值，但这两种情况都不起作用，通过在文本框中应用规则仍然显示为空……
只有single by single复选框才会在textbox中显示赋值。
浏览 0提问于2011-03-23得票数 1
回答已采纳
1回答
我有3个文件: maintransaction.php、computation.php和computepayment.php
在maintransaction中，它列出了复选框中的所有程序和价格。它在foreach中，因此当用户选择多个值时，它会将其存储在一个数组中。因为这是棘手的部分，当用户在复选框中选择多个复选框时。单击另一个按钮后，将重定向
浏览 2提问于2013-01-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
