Javascript 将表单的复选框标签附加到<；p>；要素

我已经尝试了几个小时，但没有成功。所以我决定在这里寻求帮助

所以，我有一个表格：

<form id="ecommerce-form">
   <input type="checkbox" id="seopremium" name="option-ecommerce" value="seopremium">
   <label for="seopremium" class="lead">SEO premium</label>
   <input type="checkbox" id="moyenpaiement" name="option-ecommerce" value="moyenpaiement">
   <label for="moyenpaiement" class="lead">Configuration paiements</label>
   <input type="checkbox" id="facturation" name="option-ecommerce" value="facturation">
   <label for="facturation" class="lead">Facturation simplifiée</label>
   <input type="checkbox" id="avisclients" name="option-ecommerce" value="avisclients">
   <label for="avisclients" class="lead">Avis clients</label>
   <input type="checkbox" id="additionnalsecurity" name="option-ecommerce" value="additionnalsecurity">
   <label for="additionnalsecurity" class="lead">Sécurité supplémentaire</label>
   <input type="checkbox" id="basketoptions" name="option-ecommerce" value="basketoptions">
   <label for="basketoptions" class="lead">Panier avec options</label>
</form>

搜索引擎优化溢价
配置对
简化制作
阿维斯客户
居里公寓
Panier avec选项

我正在尝试打印标签文本中的复选框，这些复选框会自动选中到段落中：

<p class="recap-option"><strong>Options:</strong></p><p class="options-selected"></p>

选项：

因此，如果所有内容都被选中，则该段落将是：

<p class="recap-option"><strong>Options:</strong></p><p class="options-selected">SEO premium, Configuration paiements, facturation simplifiée, Avis clients, Sécurité supplémentaire, Panier avec options</p>

选项：
SEO溢价、配置支付、制作简化、Avis客户、Sécuritésuppleémentaire、Panier avec选项

或者清楚地说：

选项：搜索引擎优化溢价、配置付款、制作简化、Avis客户、Sécuritésuppllémentaire、Panier avec选项

我在这里找到了一些解决问题的方法，这些方法看起来比较相似，但我无法根据自己的需要修改代码

因此，目标只是将每个元素之间的内容添加到段落元素中

---

提前感谢您的帮助。

您似乎想要这样的帮助：

var labels = document.querySelectorAll("input:checked ~ label);
labels.foreach(function(label) {
  console.log(label.textContent);
});

---

我不清楚您希望将这些标签添加到哪个段落，因此我使用console.log并将其留给您将label.texContent放入段落中。

您需要获取

label

元素并使用其值附加到

选定区域中

在取消选中时，也按照相同的步骤从
选定区域中删除未选中的元素

您可以通过以下方式定义
onChange
函数以实现预期的行为


$（'input[type=“checkbox”]”）。在（'change'，function（）上{
如果（$（this）.is（':checked'））{
var元素=$（this.parent（'div'）；
const checkedItem=elements.find（“label”）.text（）；
$（“#所选行”）.append（`p name=“${checkedItem}”>${checkedItem}
`）；
}否则{
var元素=$（this.parent（'div'）；
const uncheckedItem=elements.find（“label”）.text（）；
$（“#选定行”）.find（`p[name=“${uncheckedItem}]”）。remove（）；
}
});

搜索引擎优化溢价
配置对
简化制作
阿维斯客户
居里公寓
Panier avec选项
选定项目

您必须收集所有输入[type=checkbox]：选中并显示标签

以您的示例为例，这可以通过以下方式完成：

var nodelistChecked = document.querySelectorAll("#ecommerce-form input[type=checkbox]:checked");
// nodelistChecked now contains a Node-list with all checked input elements

使用此结果，您可以通过Array.prototype.map函数调用从标签中收集文本。querySelectorAll（）调用的结果是一个节点列表，不知道forEach/map/或其他类似数组的函数调用，因此必须调用它并将其与map转换为数组

var arrLabelText = 
  Array.prototype.map.call(nodelistChecked, function(node) {
    return (document.querySelector('label[for='+node.id+']')
      || document.createElement('label')).textContent;
  });
// arrLabelText contains an array with all selected labels 
// the || new element is used, to avoid errors if no label is found

在此之后，可以在要显示该值的元素中显示该值：

document.querySelector("p.options-selected").innerText = arrLabelText.join(', ');

使用jQuery时，它会稍微短一点，并且可以避免一些错误检查（例如找不到标签）：

请将您的代码片段包含在一个站点中，而不仅仅是链接到一个非站点的代码片段工具，还包括您试图创建的输出这样更好吗？您好，我编辑了主要帖子。如果仍然不清楚，请告诉我，我将在一分钟内尝试您的解决方案。非常感谢它工作正常！这正是我想要达到的！
function fillSelectedOptions() {
  $("p.options-selected").text(
    Array.prototype.slice.call( // depending on the jQuery version, this might be required
      $("#ecommerce-form input[type=checkbox]:checked")
        .map(function(i,node) { /* jQuery returns the index first */
          return $('label[for="'+node.id+'"]').text()
        })
    ).join(', ')
  );
}
$("#ecommerce-form input[type=checkbox]").each(function(i, node) {
  $(node).on('change', fillSelectedOptions);
});