使用javascript显示多个复选框的标签

我有一个包含几十个复选框的列表，如下面的示例所示。如果用户检查了其中的几个，我需要在页面底部显示已检查的内容，例如： 选择一 选择三

正在尝试使用onClick执行此操作，因此当单击或取消单击复选框但无法使其工作时，它将添加或删除到页面底部的列表中

我的复选框示例 HTML

.复选框标签{ 字体系列：打开无斜体； 字体大小：12px； 颜色：白色； 字体大小：粗体； 边界半径：20px 20px 20px 20px； 背景：蓝色； 填充：1px6px； 文本对齐：左对齐； } 输入[类型=复选框]：选中+标签{ 颜色：白色； 背景：绿色； } 选择一 选择二 选择三 选择四

---

您可以通过多种方法实现它。在我的实现中，我为每个复选框分配一个onClick事件处理程序，该处理程序添加或删除集合及其值，并在迭代集合后，在容器中转储一个包含所有选中复选框的字符串：

//设置以存储选定的复选框值 让项目=新集合； //对倾倒容器的引用 让resultContainer=document.getElementById'result' //onclick事件处理程序 函数更新项{ //单击复选框的值 设值=e.target.value； //如果值已在集合中，请取消选中将其删除 ifitems.hasvalue items.deletevalue //如果值不在集合中，请将其插入选中的输入 else items.addvalue // //设置已更新！现在转储其内容。。。 // //空字符串 让结果=； //迭代集合，并使用选定的值生成字符串 items.forEachi=>result+=i+ //转储字符串 resultContainer.innerHTML=result； } //选中所有复选框并分配onclick事件处理程序 让inputs=Array.from document.queryselector调用'input' inputs.forEachi=>i.onclick=updateItems 选择一 选择二 选择三 选择四 选定值

---

这可以使用每个复选框上的onClick事件和一些Javascript

 <input type="checkbox" name="lra" id="1adm" value="selected" onclick="myFunction('1adm')">

<div id="footer" />

<script>
function myFunction(checkId) {
var checkBox = document.getElementById(checkId);
var text = document.getElementById("footer");
if (checkBox.checked == true){
   //add it to footer text
} else {
   //remove from footer text
}
}
</script>

---

试试这个例子，尽管代码可能很短：

让选择器='输入[type=checkbox][name=lra]'； 设updateStatus=函数{ 让标签=[]； Array.prototype.slice.calldocument.querySelectorAllselector+'：选中+标签'.forEachfunctionl{ labels.pushl.textContent | | l.innerHTML； }; document.querySelector'checkStatus'.innerHTML=labels.join | | |'请从以上选项中选择'； }; document.addEventListener'DOMContentLoaded'，函数{ Array.prototype.slice.calldocument.querySelectorAllselector.ForEachFunction C{ c、 addEventListener“单击”，函数E{ e、 停止传播； 更新状态； }; }; updateStatus；/*在页面加载时运行*/ }; .复选框标签{ 字体系列：打开无斜体； 字体大小：12px； 颜色：白色； 字体大小：粗体； 边界半径：20px 20px 20px 20px； 背景：蓝色； 填充：1px6px； 文本对齐：左对齐； } 输入[类型=复选框]：选中+标签{ 颜色：白色； 背景：绿色； } 检查状态{ 边框顶部：1px实心ccc； 填充：1rem； 边缘顶部：.3rem； } 选择一 选择二 选择三 选择四

---

您好，这看起来是我需要的，但我需要在单独的行中显示，我如何在每行之后放置一个新行。我是新手，边学边学。感谢感谢感谢这正是我所需要的，这一条帮助很大，因为它也让我把选秀的台词放在我需要的地方。谢谢，这正是我所需要的，Colxi的那一条也很管用，但不确定如何添加新台词，我看不到任何方法可以同时接受这两个答案。