输入复选框仅更新一个值，但其他输入不更新？

Question

因此，我在计算总计菜单项的地方制作了这个应用程序，其中包括$ 5的交货费。问题是第四个选项仅包括总计5美元的费用，但其他3个选项不包括

此处的费用是我的codepen https://codepen.io/shodoro/shodoro/pen/pen/dydnopx

冰沙$ 4，唯一可以正确添加交货费的输入复选框？

前3个选项不包括总计5美元的交货费，我不知道该如何修复

这是我的JS，

      function updatePrice() {
          let items = 0;
          let deliveryFee = document.getElementById('fee')
          let tax = document.getElementById('tax')    
          let tip = document.getElementById('tip')

          tax = .1
          tip = .2

          document.querySelectorAll('input[type=checkbox]').forEach(checkBox => {
              if (checkBox.checked) {
                  items += +checkBox.value
                  deliveryFee = 5
              } else {
                  deliveryFee = 0
              }
          })


          document.getElementById("price").textContent = `Food Total: $${(items).toFixed(2)}`;
          document.getElementById("tax").textContent = `Tax (10%): $${(items * tax).toFixed(2)}`;
          document.getElementById("tip").textContent = `Tip (20%): $${(items * tip).toFixed(2)}`;
          document.getElementById("total").textContent = `Your order total is: $${((items * tax)+(items * tip)+(items)+(deliveryFee)).toFixed(2)}`;
      }

我希望所有选项在单击它们时都包含送货费，还可以确保重置送货费每当您取消选中所有选项时，要0。

Answer 1

那是因为您正在设置deliveryfee在循环中，因此，例如，如果检查了12件机翼项目，则将其设置为deliveryfee至5，然后将其设置为循环直到下一个项目（6件机翼），它将设置deliveryfee为0。 5。我认为也许您想要更多这样的东西：

          function updatePrice() {
              console.log('updatePrice');
              let items = 0;
              let deliveryFee = 0;
              let tax = document.getElementById('tax')    
              let tip = document.getElementById('tip')

              tax = .1
              tip = .2
              console.log('before forEach loop', items, deliveryFee);
              document.querySelectorAll('input[type=checkbox]').forEach(checkBox => {
                  console.log(checkBox);
                  if (checkBox.checked) {
                      console.log('checked!')
                      items += +checkBox.value
                      if (deliveryFee == 0) {
                        console.log('First checked item, setting delivery fee to 5.')
                        deliveryFee = 5;
                      }
                  } else {
                    console.log('not checked!');
                  }
              })
              console.log('after forEach loop', items, deliveryFee);
            
              if (items >= 10) {
                deliveryFee = deliveryFee * 2;
              }

              let orderTotal = (items * tax)+(items * tip)+(items) + deliveryFee;

              document.getElementById("price").textContent = `Food Total: ${(items).toFixed(2)}`;
              document.getElementById("tax").textContent = `Tax (10%): ${(items * tax).toFixed(2)}`;
              document.getElementById("tip").textContent = `Tip (20%): ${(items * tip).toFixed(2)}`;
              document.getElementById("fee").textContent = `Delivery Fee: ${deliveryFee.toFixed(2)}`;
              document.getElementById("total").textContent = `Your order total is: ${orderTotal}`;
          }