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

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

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

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

在此先感谢您的帮助。

德鲁夫·沙(Dhruv Shah)

您需要获取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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章