未选中时如何在单击和减去值时获取单选按钮的值？

Question

这是我的密码笔https://codepen.io/shodoro/pen/wvyQNJO

现在，我的复选框选项会根据选择或取消选择某项内容来添加或减去值。

我的问题在于我的单选按钮，如果我点击一个选项 3 次，它会将该值添加 3 次，而不是减去或重置。

因此，如果我单击一个值为 3 美元的单选按钮并按 10 次，它将增加 30 美元，而它应该从 3 美元变为 0 美元，回到 3 美元到 0 美元等等......基本上只有单击时添加一次值

我的复选框的逻辑是如何工作的，但对于我的单选按钮，它只是在每次点击时不断添加值？

这是 JS

document.addEventListener("click", ({ target }) => {
  if (target.className === "food" && target.checked) {
    window.menuItems += parseInt(target.value);
  } else if (target.className === "food" && !target.checked) {
    window.menuItems -= parseInt(target.value);
  } 
  
  //tips logic
  else if (target.className === "tips" && target.checked) {
    window.tip += parseInt(target.value);
  } else if (target.className === "tips" && !target.checked) {
    window.tip -= parseInt(target.value);
  } else {
    return;
  }

我希望我的单选按钮和我的复选框一样，但我不明白为什么不这样做？

Answer 1

您应该只使用 = 而不是 += 或 -= 作为单选按钮。

window.menuItems = 0;
window.tip = 0;

const foodTotal = document.getElementById("price");
const tipTotal = document.getElementById("tip");


document.addEventListener("click", ({ target }) => {
  if (target.className === "food" && target.checked) {
    window.menuItems += parseInt(target.value);
  } else if (target.className === "food" && !target.checked) {
    window.menuItems -= parseInt(target.value);
  } 
  
  //tips logic
  else if (target.className === "tips" && target.checked) {
    window.tip = parseInt(target.value);
  } else if (target.className === "tips" && !target.checked) {
    window.tip = parseInt(target.value);
  } else {
    return;
  }

    foodTotal.textContent = `Food Total: $${(window.menuItems / 100).toFixed(2)}`;
tipTotal.textContent = `Tip: $${(window.tip / 100).toFixed(2)}`;
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Perfect Pies</title>
  </head>
  <body>
        <div class="menu-items">
          <h2>Checkbox Items</h2>
          <div class="food-option">
            <input type="checkbox" name="items" value="1000" class="food" />
            <label for="items">Food $10</label>
          </div>
          <div class="food-option">
            <input type="checkbox" name="items" value="2000" class="food" />
            <label for="items">Food $20</label>
          </div>
          <div class="food-option">
            <input type="checkbox" name="items" value="3000" class="food" />
            <label for="items">Food $30</label>
          </div>
        <div class="payment">
          <h2>Radio Items click an option multiple times and you will see it add infinitely</h2>
          <p id="price">Food Total: $0.00</p>
          <p id="tip">Tip: $0.00</p>
          <div class="tip-options">
            <div>
              <input
                type="radio"
                value="0"
                id="tip0"
                name="tip"
                class="tips"
                checked
              />
              <label for="tip0">$0</label>
            </div>
            <div>
              <input
                type="radio"
                value="300"
                id="tip1"
                name="tip"
                class="tips"
              />
              <label for="tip1">$3</label>
            </div>
            <div>
              <input
                type="radio"
                value="500"
                id="tip2"
                name="tip"
                class="tips"
              />
              <label for="tip2">$5</label>
            </div>
          </div>
          <p id="total">Your order total is: $0.00</p>
          <button id="orderBtn">Place Order</button>
        </div>
      </div>
    </div>
  </body>
</html>