Javascript可以'；t获取复选框值以显示信息字符串

我正在尝试用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>

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

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

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

然而，我似乎无法通过复选框获得类似的结果。我尝试了以下方法：

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>

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

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

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

香肠

培根

肉：

Javascript:

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

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

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

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

函数meatOnPizza（）{ var meat=document.forms[0]； var txt=“”； var i； 对于（i=0；i 我感谢任何人能提供的指导

---

Jessica

好吧，看来你只是忘了在复选框前插入一个开始标签

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

编辑：我尝试了您的更新代码，效果很好（请参阅下面的代码片段）。问题的原因可能是此表单不是页面中的第一个表单，这导致

文档.forms[0]

返回错误的表单

那么，既然您已经为这个表单分配了一个ID，为什么不直接使用它而不是使用

document.forms

？然后你可以替换

var meat = document.forms[0];

作者：

函数meatOnPizza（）{ var meat=document.forms[0]； var txt=“”； var i； 对于（i=0；i

香肠

培根

肉：

谢谢！我是个新手，在网上发布时，功能和表单标签似乎被切断了。我更新了我的例子。代码仍然不起作用。