從復選框獲取值并將它們發送到輸入文本

正如您在示例中看到的那樣，我試圖在檢查輸入后立即提取所有輸入值，并將它們列印在將通過郵件發送的輸入文本中。我現在無法澄清，因為我只能列印該輸入中的最后一個選項，而不是三個。

我認為錯誤是我應該在 for 回圈之外捕獲結果，但我不知道該怎么做。

 const groupInput1 = document.getElementsByName('glassLeistung');
 const output = document.getElementById('glassType');
 const go = document.getElementById('go');
 
  go.addEventListener("click", event => {

    for (let i = 0; i < groupInput1.length; i  ) {
       if (groupInput1[i].checked) {
           console.log(groupInput1[i].value);
           output.value = groupInput1[i].value   ''
       }

    }
  })

 

<input type="checkbox" class="selected" id="glass" name="glassLeistung"
value="Glass" autocomplete="off">
                                                       
<input type="checkbox" id="rahmen" class="selected" name="glassLeistung"
value="Rahmen" autocomplete="off">
                                                       
<input type="checkbox" id="falzen" class="selected" name="glassLeistung"
value="Falzen" autocomplete="off">



<input type="text" name="glassType-420" value="" size="40"  id="glassType" aria-invalid="false">

<button id="go">go</button>

如果有人可以幫助我，那就太棒了。謝謝

uj5u.com熱心網友回復：

const groupInput1 = document.getElementsByName('glassLeistung');
 const output = document.getElementById('glassType');
 const go = document.getElementById('go');
 
  go.addEventListener("click", event => {
    output.value=''
    for (let i = 0; i < groupInput1.length; i  ) {
       if (groupInput1[i].checked) {
           console.log(groupInput1[i].value);
           output.value = output.value   groupInput1[i].value   ' '
       }

    }
  })

<input type="checkbox" class="selected" id="glass" name="glassLeistung"
value="Glass" autocomplete="off">
                                                       
<input type="checkbox" id="rahmen" class="selected" name="glassLeistung"
value="Rahmen" autocomplete="off">
                                                       
<input type="checkbox" id="falzen" class="selected" name="glassLeistung"
value="Falzen" autocomplete="off">



<input type="text" name="glassType-420" value="" size="40"  id="glassType" aria-invalid="false">

<button id="go">go</button>

uj5u.com熱心網友回復：

只需添加一個變數來收集值，然后在回圈后立即添加它們。

const groupInput1 = document.getElementsByName('glassLeistung');
 const output = document.getElementById('glassType');
 const go = document.getElementById('go');
 
  go.addEventListener("click", event => {
    const collectHere = [];
    for (let i = 0; i < groupInput1.length; i  ) {
       if (groupInput1[i].checked) {
           console.log(groupInput1[i].value);
           collectHere.push(groupInput1[i].value);
       }
    }
    
    output.value = collectHere.join(' - ');
  })

<input type="checkbox" class="selected" id="glass" name="glassLeistung"
value="Glass" autocomplete="off">
                                                       
<input type="checkbox" id="rahmen" class="selected" name="glassLeistung"
value="Rahmen" autocomplete="off">
                                                       
<input type="checkbox" id="falzen" class="selected" name="glassLeistung"
value="Falzen" autocomplete="off">



<input type="text" name="glassType-420" value="" size="40"  id="glassType" aria-invalid="false">

<button id="go">go</button>

標籤：

上一篇：如何在我的導航關閉后讓我的側導航選單中的打開元素不消失

下一篇：懸停在筆劃的特定短劃線上