javascript - 如何使用复选框打印选定的值并打印它们而不得到未定义的值？

Question

我这里有 html 和 javascript 的代码。我正在尝试使用 javascript 得到这个结果。例如，Extras: Candy, Ice Cream 或 Extras: Candy, Chocolate 并且不会在两者之间或某处获得未定义的值。我尝试过使用多个变量，但我得到了未定义的值。如果我只选择了一项，则它只打印一项，而不会打印其余的。

getCheckboxvalue() {
    var msg2 = "";

if (extras[0].checked) {
msg2 = (msg2 + "Candy");
} else if (extras[1].checked) {
msg2 = (msg2 + "Chocolate");
} else if (extras[2].checked) {
msg2 = (msg2 + "Ice Cream");
}
var message = "Extras: " + msg2;
document.getElementsByClassName("gettext")[0].innerHTML = message;
}

<form name="elem" autocomplete="on">
  <input type="checkbox" name="extras">Candy
  <br>
  <input type="checkbox" name="extras">Chocolate
  <br>
  <input type="checkbox" name="extras">Ice Cream
  <input type="button" onClick="getCheckboxvalue()" value="Get Order!">
  <br>
  <br><span class="gettext"></span>
</form>

Answer 1

function getCheckboxvalue() {
    var msg2=[];
for (var i=0;i< document.getElementsByName("extras").length;i++){
   if ( document.getElementsByName("extras")[i].checked) {
    msg2.push(document.getElementsByName("extras")[i].value);
    }
}
  
  document.getElementsByClassName("gettext")[0].innerHTML ="Extras :"+ msg2.toString();
}

<form name="elem" autocomplete="on">
  <input type="checkbox" name="extras" value="Candy">Candy
  <br>
  <input type="checkbox" name="extras" value="Chocolate">Chocolate
  <br>
  <input type="checkbox" name="extras" value="Ice Cream">Ice Cream
  <input type="button" onClick="getCheckboxvalue();" value="Get Order!">
  <br>
  <br><span class="gettext"></span>
</form>