从复选框获取值并将它们发送到输入文本

Question

正如您在示例中看到的那样，我试图在检查输入后立即提取所有输入值，并将它们打印到将通过邮件发送的输入文本中。我现在无法澄清，因为我只能打印该输入中的最后一个选项，而不是三个。

我认为错误是我应该在 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>

如果有人可以帮助我，那就太棒了。谢谢

Answer 1

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>

Answer 2

只需添加一个变量来收集值，然后在循环后立即添加它们。

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>