如何在多选框中显示我选择过的元素？
在多选框中显示已选择的元素，可以通过以下步骤实现：
- 创建一个多选框列表，其中包含所有可选的元素。
- 给每个多选框元素添加一个事件监听器，当选中或取消选中时触发。
- 在事件监听器中，检查每个多选框元素的选中状态。如果选中，则将该元素添加到一个已选择的元素列表中；如果取消选中，则从已选择的元素列表中移除该元素。
- 将已选择的元素列表显示在页面上，可以使用一个文本框或一个标签来展示。
- 当用户进行选择操作时，更新已选择的元素列表并更新显示。
以下是一个示例代码，演示如何在多选框中显示已选择的元素：
<!DOCTYPE html>
<html>
<head>
<title>显示已选择的元素</title>
<script>
// 创建一个空数组，用于存储已选择的元素
var selectedElements = [];
// 事件监听器，当多选框选中状态改变时触发
function handleCheckboxChange(checkbox) {
var element = checkbox.value;
// 检查多选框的选中状态
if (checkbox.checked) {
// 如果选中，则将元素添加到已选择的元素列表中
selectedElements.push(element);
} else {
// 如果取消选中，则从已选择的元素列表中移除元素
var index = selectedElements.indexOf(element);
if (index > -1) {
selectedElements.splice(index, 1);
}
}
// 更新显示已选择的元素列表
var selectedElementsText = document.getElementById('selectedElements');
selectedElementsText.textContent = selectedElements.join(', ');
}
</script>
</head>
<body>
<h1>多选框示例</h1>
<p>请选择以下元素：</p>
<input type="checkbox" value="元素1" onchange="handleCheckboxChange(this)"> 元素1<br>
<input type="checkbox" value="元素2" onchange="handleCheckboxChange(this)"> 元素2<br>
<input type="checkbox" value="元素3" onchange="handleCheckboxChange(this)"> 元素3<br>
<input type="checkbox" value="元素4" onchange="handleCheckboxChange(this)"> 元素4<br>
<br>
<p>已选择的元素：</p>
<p id="selectedElements"></p>
</body>
</html>在上述示例中，我们创建了一个多选框列表，用户可以选择其中的元素。每个多选框元素都绑定了一个事件监听器handleCheckboxChange，当选中状态改变时会触发该函数。在函数中，我们根据多选框的选中状态，将选中的元素添加到selectedElements数组中或从数组中移除。最后，我们将已选择的元素列表显示在页面上的selectedElements标签中。
这只是一个简单的示例，实际应用中可以根据需求进行定制和扩展。
相关·内容
1回答
如何在多选框中显示我选择过的元素？
laravel、jquery-select2
我从中选择了这个选择框，在编辑页面中，我想要带来我已经选择的选项<div class="col-md-12"> <label>Name"selected":"" }} >{{ $user->name }}</option>
浏览 7提问于2019-07-27得票数 1
回答已采纳
2回答
PHP中的一篇文章多类别系统
php、sql、categories
文章的多类选择系统我理解在这个表中多添加一个关系表&保存文章ID和类别ID的整个概念。但是不知道如何使用数组实现多个选择系统中
浏览 2提问于2012-03-24得票数 2
回答已采纳
1回答
ASP.NET MVC复选框和单选按钮示例
asp.net-mvc、checkbox、radio-button
我正在寻找详细的ASP.NET MVC示例，这些示例广泛使用分组复选框(可以选择多个复选框，使用案例:选择您想订阅的杂志，如"SI"，“福布斯”，“金钱”等)以及分组单选按钮(使用案例:在银行选择“储蓄我搜索并发现只有零散的UI片段，但没有完整的MVC示例，它大量使用了这两个UI元素，并详细介绍了这些元素的值
浏览 2提问于2011-06-07得票数 1
回答已采纳
1回答
在select[html]更改后更改可用复选框- Zend框架
zend-framework、select、checkbox
你能帮我解决我的烦心事吗？我使用Zend_Form创建了我需要的东西。然而，由于我有多对多的关系，我决定通过复选框来显示多个选项。不幸的是，这些复选框的范围取决于表单中可用的选择字段。我想根据选择的选项更改可见/可用复选框
浏览 2提问于2010-05-30得票数 0
回答已采纳
2回答
swing的BoxModel是如何工作的？
java、swing、components、positioning、css
假设我想创建一个简单的计算器。它由3个字段组成。用于显示结果的文本字段、用于选择系统的带复选框的字段和带数字的字段。这就是我</em
浏览 0提问于2010-05-09得票数 0
回答已采纳
1回答
HTML选择多个在Android中呈现奇怪吗？
android、html
我正在尝试弄清楚如何通过Android手机编写代码才能正确使用。看着...
在选择选项时，...it看起来很不错。但是，无论选择什么，页面始终只显示列表中的第一个选项。你知道我能做些什么来更好地处理这件事吗？
浏览 1提问于2011-04-14得票数 4
1回答
如何在YII中动态禁用单个复选框的复选框
php、dynamic、yii、checkboxlist
在表单中，我有一个复选框列表，其中有两个复选框(男性和女性)，用户可以同时选择这两个复选框或任意一个复选框。值正在DB中保存。当我们从DB填充它时，我想做的是，如果选中了男性，那么它应该选择男性复选框并禁用女性复选框，反之亦然。<?>
问题是，当我填充它是选择一个，我选择
浏览 3提问于2014-09-23得票数 0
1回答
如何在列表框zk中添加条件复选框
java、javascript、frameworks、primefaces、zk
如何在列表框中添加条件复选框，此功能还应用于选择所有功能，我们在复选框中显示25个项目时，某些项目不应显示，当我们选择主复选框时，应选中所有复选框。例如，我必须在列表框中列出图像图标，如PDF，jpg，gif，msword和excel等图像图标，并且复选框应该只与PDF图像图标和msword图像图标一起出现，复选框</e
浏览 4提问于2013-03-21得票数 0
回答已采纳
2回答
基于多个复选框选择的显示页面元素
jquery、dom
我只是进入JS/jquery并尝试基于多个复选框选择来显示页面元素。我希望所有元素从未选中的所有复选框开始显示，然后在进行一个或多个复选框选择时，只显示所选div类的元素(除非所有复选框都未选中，否则所有其他元素都将隐藏)。我所处的陷阱是，它是反向
浏览 3提问于2020-07-27得票数 1
回答已采纳
1回答
页面清除- JQuery移动
javascript、jquery、html、jquery-mobile
由于我在我的应用程序中使用了一个多页模板，所以当我导航回同一个页面时，我以前输入到表单和选择的数据就会出现。当用户返回页面时，我正在寻找一种将页面擦除回默认状态的方法。页面上有表单、选择、复选框和img标签。只需向默认元素中添加自定义属性(如data- default ="true") (例如0)。
浏览 2提问于2014-05-28得票数 1
回答已采纳
2回答
基于多个CSS类和来自多个复选框的输入显示/隐藏tr元素
javascript、jquery、html、css、checkbox
我有一个包含各种表的大型HTML页面。我想在页面顶部创建一组复选框，这些复选框可用于筛选各个表中的值。table中的值可以属于多个组，其中一个组由唯一的CSS类指示。下面是一个棘手的部分，当选择一个组时，必须显示所有带有对应CSS类标记的值。例如，如果选择了A组，则应显示带有A类标记的所有值。
浏览 3提问于2014-03-24得票数 0
回答已采纳
4回答
多重复选框过滤器:如何同时获得加减效果
javascript、jquery、html、css
我想要做复选框，隐藏和显示div项目的基础上，他们有什么类(Es)。过滤器分为两类:城市和成本。检查每个类别中的两个复选框应具有加性效应(即，如果我选中了“Hamilton”和“多伦多”，理想情况下，所有元素都应该显示出来)。在两个类别之间检查两个复选框应该有一个减法效果(也就是说，如果我选中了“多伦多”和“廉价饮食”，我应该只看到一个博客)。<
浏览 8提问于2019-12-30得票数 1
回答已采纳
1回答
如何在可扩展菜单中添加元素？
android
我希望有一个可展开的菜单，当您展开一个子项时，它将显示一些自定义项，我选择的项，如文本输入字段或复选框(见下图)。
更新：
因此，我不仅希望将文本项作为子元素，还希望将所有类型的元素都
浏览 0提问于2013-04-12得票数 1
1回答
带有order /UX和技术问题的复选框
html、forms、checkbox
Introduction但是，有了备选案文(1)，指标将以三次形式重复，而备选案文(2)的额外形式要素将不在指标清单内。此外，我希望将指标保留在一个元素中，因为还有
浏览 2提问于2016-02-19得票数 0
回答已采纳
2回答
HTML/jQuery切换()元素在加载时显示
jquery、html
我正在编写一个jQuery函数，它将选择/取消选中所有复选框。目前，在我看来，最好的方法是使用.toggle()方法。不幸的是，我无缘无故地得到了奇怪的效果。一旦加载DOM，所选元素就会消失。我找到的唯一可行的解决方案是使用.show()/.fadeIn()函数。我使用.click()事件和几个if语句解决了这个问题(如果我可以使用.toggl
浏览 7提问于2013-12-20得票数 0
1回答
设置编辑视图的最佳实践是什么?在这个视图中，您可以将一些内容与来自非常大的集合的其他内容进行匹配。
ruby-on-rails
我有一个设计问题。希望这不会给人一种懒惰的感觉。
我正在编写一个简单的会计应用程序:一个分类帐有多个帐户，每个帐户有许多交易，等等。复式记帐要求我们将事务与其他事务进行匹配，因此我有一个单独的模型，称为LedgerItemGroup，它有许多事务。我的问题是，最好的方法是为未匹配的事务设计edit_ledger_item视图，以便记账员可以手动将其与一个或多个其他未匹配的事务进行匹配。然后，记账员将
浏览 2提问于2009-10-27得票数 0
回答已采纳
4回答
dojo中的MultiSelectCombobox问题
javascript、dojo
我需要在每个选项前面都有复选框的组合框，以选择多个选项。我尝试使用"dropdown:true“来使用CheckedMultiSelect，是否应该为checkedMulti
浏览 1提问于2012-05-16得票数 2
回答已采纳
1回答
如何在选中复选框时触发datagrid事件？
asp.net、datagridview、checkbox、itemtemplate、datagridviewcheckboxcell
在item模板中的数据网格中，按钮被替换为复选框以提高可行性，如果我单击该按钮，则会相应地显示面板，面板元素也会随其内容一起显示。现在，我的要求是在带有复选框的项模板中更改此按钮，并在标题模板中包含另一个复选框。
我可以选择检查中的项，也可以检查数据网格<e
浏览 2提问于2012-05-16得票数 0
1回答
如何将引用保存到表行中的复选框？
javascript、jquery、checkbox
选中复选框后，我将显示一个表单。如果表单被取消，我希望取消选中该复选框。在表格表单(第二个表单)上，滚动到复选框并选中一个，然后转到第一个表单，然后单击Cancel按钮。向下滚动到您选中的框中。在HTML中，我定义：
<input id="current-checkbox" type="checkbox" class="hidden"
浏览 3提问于2016-07-30得票数 0
2回答
复选框没有出现在内联中。
html
我在和复选框做斗争。我想把它们显示在一条线上，彼此相邻。这是我的。
<form style="height:1200px;"role="form" method="post" action="..
浏览 6提问于2015-02-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
