将表单的复选框标签附加到 <p> 元素中

Question

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

所以，我有一个表格：

<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>

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

<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、付款配置、简化发票、客户评论、额外安全性、带选项的购物车

我在这里找到了一些看起来相对相似的问题的解决方案，但我无法根据自己的需要调整代码。

http://jsfiddle.net/5ryy9krn/2/

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

预先感谢您的任何帮助。

Answer 1

您需要获取该label元素并使用其值附加到selected-area.取消选中时，也按照相同的过程从列表中删除未选中的元素selected-area您可以onChange通过以下方式定义函数来实现预期的行为。$('input[type="checkbox"]').on('change', function() {&nbsp; if ($(this).is(':checked')) {&nbsp; &nbsp; var elements = $(this).parent('div');&nbsp; &nbsp; const checkedItem&nbsp; = elements.find("label").text();&nbsp; &nbsp; $('#seleted-rows').append(`<p name="${checkedItem}">${checkedItem}</p>`);&nbsp; } else {&nbsp; &nbsp; var elements = $(this).parent('div');&nbsp; &nbsp; const uncheckedItem = elements.find("label").text();&nbsp; &nbsp; $('#seleted-rows').find(`p[name="${uncheckedItem}"]`).remove();&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="pb-5 devis-invisible" id="devis-ecommerce">&nbsp; &nbsp;<form id="ecommerce-form">&nbsp; &nbsp; &nbsp; <div class="row pb-5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" id="seopremium" name="option-ecommerce" value="seopremium">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="seopremium" class="lead">SEO premium</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" id="moyenpaiement" name="option-ecommerce" value="moyenpaiement">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="moyenpaiement" class="lead">Configuration paiements</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" id="facturation" name="option-ecommerce" value="facturation">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="facturation" class="lead">Facturation simplifiée</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" id="avisclients" name="option-ecommerce" value="avisclients">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="avisclients" class="lead">Avis clients</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" id="additionnalsecurity" name="option-ecommerce" value="additionnalsecurity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="additionnalsecurity" class="lead">Sécurité supplémentaire</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" id="basketoptions" name="option-ecommerce" value="basketoptions">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="basketoptions" class="lead">Panier avec options</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;</form></div><div>&nbsp; <p>Selected Items</p>&nbsp; <div id="seleted-rows"></div>&nbsp;&nbsp;</div>

Answer 2

你似乎想要这样的东西：var labels = document.querySelectorAll("input:checked ~ label);labels.foreach(function(label) {&nbsp; console.log(label.textContent);});我不清楚您希望将这些标签添加到哪个段落，因此我使用了 console.log 并将其留给您将 label.texContent 放入您的段落中

Answer 3

您必须收集所有 input[type=checkbox]:checked 和标签。使用您的示例，可以通过以下方式完成：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() 调用的结果是一个 Nodelist，并且不知道 forEach/map/或其他类似数组的函数调用，因此您必须调用它并使用 map 将其转换为数组。var arrLabelText =&nbsp;&nbsp; Array.prototype.map.call(nodelistChecked, function(node) {&nbsp; &nbsp; return (document.querySelector('label[for='+node.id+']')&nbsp; &nbsp; &nbsp; || document.createElement('label')).textContent;&nbsp; });// arrLabelText contains an array with all selected labels&nbsp;// the || new element is used, to avoid errors if no label is found之后，您可以在要显示的元素中显示该值：document.querySelector("p.options-selected").innerText = arrLabelText.join(', ');当你使用 jQuery 时，它会更短一些，并且避免了一些错误检查（比如没有找到标签）：function fillSelectedOptions() {&nbsp; $("p.options-selected").text(&nbsp; &nbsp; Array.prototype.slice.call( // depending on the jQuery version, this might be required&nbsp; &nbsp; &nbsp; $("#ecommerce-form input[type=checkbox]:checked")&nbsp; &nbsp; &nbsp; &nbsp; .map(function(i,node) { /* jQuery returns the index first */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return $('label[for="'+node.id+'"]').text()&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; ).join(', ')&nbsp; );}$("#ecommerce-form input[type=checkbox]").each(function(i, node) {&nbsp; $(node).on('change', fillSelectedOptions);});