将表单的复选框标签附加到<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 条评论
登录 后参与评论

相关文章

显示div或p中已选中的复选框

将P元素保留在Div中

修复JS代码:将复选框中的多个值附加到url

动态将带有复选框的列添加到表单中的html表

表单POST中的HTML复选框

选中复选框时如何将元素添加到数组

表单复选框中的Coldfusion数组

如何验证表单中的复选框

从表单中的复选框中获取标签

Oracle表单中的复选框

将复选框添加到grails列表中

使用JQuery访问表单中的复选框元素

Bootstrap 3表单复选框标签与Chromium + Firefox中的复选框输入不匹配

选中p:selectCheckboxMenu中的所有复选框

p:ajax rowSelectCheckbox事件在列标题复选框中不起作用

如何将表单的复选框分组到Node中的数组中?

如何将复选框附加到我的Ajax响应中

AngularJS:如何将复选框中的标签添加到div

使用表单元素-复选框-contenteditable div内

在GridView中,当单击复选框时,使用Grid的同一行中的JavaScript将标签中的值添加到TextBox中

显示循环元素中的复选框

如何将选中的复选框附加到html表中的列表顶部?

如何将单选/复选框数据与其他字段一起添加到表单中?

MS Access 2013:基于表单中的复选框更改报表中的标签标题

如何将复选框的值/名称添加到表单提交的变量中?

使用 PHP 将 p 元素插入到 div 元素中

在 activeadmin 表单中的复选框标签旁边添加图像

如何将超链接放在 wordpress 中复选框消息旁边的联系表单中?

特定标签中的复选框