亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

將表單的復選框標簽附加到 <p> 元素中

將表單的復選框標簽附加到 <p> 元素中

繁花如伊 2023-07-29 13:45:32
我已經嘗試這樣做了幾個小時但沒有成功。所以我決定在這里尋求幫助。所以，我有一個表格：<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/因此，目標只是將每個之間的內容附加到段落元素中。預先感謝您的任何幫助。
查看完整描述

3 回答

?
守著一只汪

TA貢獻1872條經驗 獲得超4個贊

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


查看完整回答
反對 回復 2023-07-29
?
ITMISS

TA貢獻1871條經驗 獲得超8個贊

你似乎想要這樣的東西：


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

labels.foreach(function(label) {

  console.log(label.textContent);

});

我不清楚您希望將這些標簽添加到哪個段落，因此我使用了 console.log 并將其留給您將 label.texContent 放入您的段落中


查看完整回答
反對 回復 2023-07-29
?
當年話下

TA貢獻1890條經驗 獲得超9個贊

您必須收集所有 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);

});


查看完整回答
反對 回復 2023-07-29
  • 3 回答
  • 0 關注
  • 195 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號