第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

將表單的復(fù)選框標(biāo)簽附加到 <p> 元素中

將表單的復(fù)選框標(biāo)簽附加到 <p> 元素中

繁花如伊 2023-07-29 13:45:32
我已經(jīng)嘗試這樣做了幾個(gè)小時(shí)但沒(méi)有成功。所以我決定在這里尋求幫助。所以，我有一個(gè)表格：<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>我正在嘗試打印自動(dòng)選中的復(fù)選框的標(biāo)簽文本到段落中：<p class="recap-option"><strong>Options:</strong></p><p class="options-selected"></p>因此，如果檢查了所有內(nèi)容，該段落將是：<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>或者明確地說(shuō)：選項(xiàng)：高級(jí) SEO、付款配置、簡(jiǎn)化發(fā)票、客戶(hù)評(píng)論、額外安全性、帶選項(xiàng)的購(gòu)物車(chē)我在這里找到了一些看起來(lái)相對(duì)相似的問(wèn)題的解決方案，但我無(wú)法根據(jù)自己的需要調(diào)整代碼。http://jsfiddle.net/5ryy9krn/2/因此，目標(biāo)只是將每個(gè)之間的內(nèi)容附加到段落元素中。預(yù)先感謝您的任何幫助。
查看完整描述

3 回答

?
守著一只汪

TA貢獻(xiàn)1872條經(jīng)驗(yàn) 獲得超4個(gè)贊

您需要獲取該label元素并使用其值附加到selected-area.


取消選中時(shí)，也按照相同的過(guò)程從列表中刪除未選中的元素selected-area


您可以onChange通過(guò)以下方式定義函數(shù)來(lái)實(shí)現(xiàn)預(yù)期的行為。


$('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>


查看完整回答
反對(duì) 回復(fù) 2023-07-29
?
ITMISS

TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超8個(gè)贊

你似乎想要這樣的東西：


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

labels.foreach(function(label) {

  console.log(label.textContent);

});

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


查看完整回答
反對(duì) 回復(fù) 2023-07-29
?
當(dāng)年話(huà)下

TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊

您必須收集所有 input[type=checkbox]:checked 和標(biāo)簽。


使用您的示例，可以通過(guò)以下方式完成：


var nodelistChecked = document.querySelectorAll("#ecommerce-form input[type=checkbox]:checked");

// nodelistChecked now contains a Node-list with all checked input elements

有了這個(gè)結(jié)果，您可以通過(guò) Array.prototype.map 函數(shù)調(diào)用從標(biāo)簽中收集文本。querySelectorAll() 調(diào)用的結(jié)果是一個(gè) Nodelist，并且不知道 forEach/map/或其他類(lèi)似數(shù)組的函數(shù)調(diào)用，因此您必須調(diào)用它并使用 map 將其轉(zhuǎn)換為數(shù)組。


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(', ');

當(dāng)你使用 jQuery 時(shí)，它會(huì)更短一些，并且避免了一些錯(cuò)誤檢查（比如沒(méi)有找到標(biāo)簽）：


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

});


查看完整回答
反對(duì) 回復(fù) 2023-07-29
  • 3 回答
  • 0 關(guān)注
  • 207 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)