Javascript 无法获取复选框值来显示信息字符串

Question

我正在尝试用 HTML、CSS 和 Javascript 构建一个简单的订单表单。我是一名初学者，并试图在用户选择订单时让输入显示订单摘要。通过执行以下操作，我可以使用单选按钮来完成这项工作：

HTML：

<input type="radio" name="crust"  onclick="crustOfPizza(this.value)" value="Original"> Original <br>
<input type="radio" name="crust"  onclick="crustOfPizza(this.value)" value="Garlic and Herb"> Garlic and Herb <br>
</form>

<p> Crust: </p> <output id="pizzaCrust"> </output> </br>

Javascript：

function crustOfPizza(crust) {
  document.getElementById("pizzaCrust").value = crust;  
}

但是，我似乎无法使用复选框获得类似的结果。我尝试了以下方法：

HTML：

<form id="pizza-meat">
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Sausage">Sausage<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Bacon">Bacon<br>
    </form>

<p> Meat: </p> <output id="pizzaMeat"> </output>    

Javascript：

function meatOnPizza() {
  var meat = document.forms[0];
  var txt = "";
  var i;
  for (i = 0; i < meat.length; i++) {
    if (meat[i].checked) {
      txt = txt + meat[i].value + " ";
    }
  }
  document.getElementById("pizzaMeat").value = txt;
}

感谢任何人提供的任何指导！

杰西卡

Answer 1

好吧，您似乎只是忘记在复选框之前插入一个<form> 开始标签。

插入之后（以及您发布的 JS 代码中也缺少的函数声明），您的代码可以正常工作：

编辑：我尝试了您更新的代码，它工作正常（见下面的 sn-p）。问题的原因可能是此表单不是您页面中的第一个表单，这导致document.forms[0]; 返回错误的表单。

好吧，既然您已经为这个表单分配了一个 ID，为什么不直接使用它而不是使用 document.forms？然后你可以替换

var meat = document.forms[0];

作者：

var meat = document.getElementById("pizza-meat");

function meatOnPizza() {
  var meat = document.forms[0];
  var txt = "";
  var i;
  for (i = 0; i < meat.length; i++) {
    if (meat[i].checked) {
      txt = txt + meat[i].value + " ";
    }
  }
  document.getElementById("pizzaMeat").value = txt;
}

<form id="pizza-meat">
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Sausage">Sausage<br>
    <input type="checkbox" name="meat" onclick="meatOnPizza()" value="Bacon">Bacon<br>
    </form>

<p> Meat: </p> <output id="pizzaMeat"> </output>