Javascript AngularJS，中国食品，名称和数字输入

好的，我正在使用AngularJS和jquery构建假中餐菜单。第一部分只是列出项目，第二部分允许用户“订购”食品，然后通过将订购的食品（复选框）乘以数量（输入的数字）来创建总价

问题是，我似乎无法通过名称获取输入的数字的值

我认为，以下是所有相关代码：

    <div id = "order">
<hr>
<h2> Order </h2>
<form>
 <!--  So I need to somehow extra the price of the item, and the number in the 'number' input, multiply
  them, and then add the resulting number to a "total" variable.  Hmmm -->
  <h3 class = "orderSec">Main</h3>
  <div ng-repeat = "x in main"><input type = "number" min = "0" max = "10" name = {{x.food}}></input> {{x.food}} ({{x.price | currency}})<input type = "checkbox" value = {{x.price}} id = {{x.food}}></input></div>
  <br>
  Total: <span id = "total"></span>
  <br>
  <input type = "submit" onClick = "total()">
  </form>
</div>

---

您的代码中有几个问题：

• 您需要将事件处理程序挂接到复选框，以便在选中/取消选中它们时运行代码，而不仅仅是在加载页面时
• 数量字段也是如此
• 您需要计算这些事件下的总数，而不是在单击submit按钮时，因为此时表单将被提交，而总数将不会显示
• 您需要将

  quantityId

  值连接到选择器字符串，而不是将其用作文本值
• 您需要选择与复选框相关的元素，而不是按名称选择所有复选框

也就是说，您应该注意，使用单个函数可以使逻辑变得更简单，该函数可以在复选框或数量更改时计算总数。试试这个：

jQuery（$=>{
让$checkbox=$（'form:checkbox'）。在（'change'，calcTotal）上；
让$quanties=$（'form.quantity'）。在（'input'，calcTotal）上；
函数calcTotal（）{
设total=0；
$checkbox.filter（“：checked”）.each（function（）{
设$checkbox=$（此项）；
total+=parseFloat（$checkbox.val（））*parseInt（$checkbox.sides（'input.quantity'）.val（），10）；
});    
$（'总计'）.text（总计）；
}
})

命令
主要
洛雷姆（9.99）
Ipsum（5.99）


总计：

提交

function total()
{
  //this needs to gather the price (value) of all checked boxes, then multiply it by the value of adjacent number input
  $('input[type=checkbox]').each(function () {
    if (this.checked)
      {
        console.log($(this).val());
        var quantityId = this.id;
        console.log(quantityId);
        var money = $('input[name=quantityId]').val();
        console.log(money);
        //why doesn't the above give me the number in the input?


        var money2 = document.getElementsByName(quantityId).value;
        console.log(money2);
        //the above also comes back "undefined.""  WTF!?
      }
  }
);

}