将表单的复选框标签附加到 <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() {

  if ($(this).is(':checked')) {

    var elements = $(this).parent('div');

    const checkedItem  = elements.find("label").text();

    $('#seleted-rows').append(`<p name="${checkedItem}">${checkedItem}</p>`);

  } else {

    var elements = $(this).parent('div');

    const uncheckedItem = elements.find("label").text();

    $('#seleted-rows').find(`p[name="${uncheckedItem}"]`).remove();

  }

});

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

   <form id="ecommerce-form">

      <div class="row pb-5">

         <div class="col-4">

            <input type="checkbox" id="seopremium" name="option-ecommerce" value="seopremium">

            <label for="seopremium" class="lead">SEO premium</label>

         </div>

         <div class="col-4">

            <input type="checkbox" id="moyenpaiement" name="option-ecommerce" value="moyenpaiement">

            <label for="moyenpaiement" class="lead">Configuration paiements</label>

         </div>

         <div class="col-4">

            <input type="checkbox" id="facturation" name="option-ecommerce" value="facturation">

            <label for="facturation" class="lead">Facturation simplifiée</label>

         </div>

      </div>

      <div class="row">

         <div class="col-4">

            <input type="checkbox" id="avisclients" name="option-ecommerce" value="avisclients">

            <label for="avisclients" class="lead">Avis clients</label>

         </div>

         <div class="col-4">

            <input type="checkbox" id="additionnalsecurity" name="option-ecommerce" value="additionnalsecurity">

            <label for="additionnalsecurity" class="lead">Sécurité supplémentaire</label>

         </div>

         <div class="col-4">

            <input type="checkbox" id="basketoptions" name="option-ecommerce" value="basketoptions">

            <label for="basketoptions" class="lead">Panier avec options</label>

         </div>

      </div>

   </form>

</div>

<div>

  <p>Selected Items</p>

  <div id="seleted-rows">

</div>  

</div>

Answer 2

你似乎想要这样的东西：

var labels = document.querySelectorAll("input:checked ~ label);

labels.foreach(function(label) {

  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 = 

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

});