javascript - 如何防止复选框循环和单选按钮循环创建两个单独的价格总计

Question

我有一个用于复选框的查询选择器，工作正常，并且我将其复制到单选按钮，但我遇到了他们都保留单独总计的问题。我试图从它们中取出totalPrice变量并将其放在外面以便共享，但这造成了价格未从未选中的复选框和单选按钮中删除的问题。

这是我当前的错误代码:

const form = document.getElementById('bookingForm');
const total = document.getElementById('total');
document.getElementById("bookingForm").addEventListener("click", function(e) {
  if (e.target.name === "event[]") {
    let totalprice = 0;
    [...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
      if (box.checked) {
        totalprice += +box.dataset.price;
      }
    })
    document.querySelector("[name=total]").value = totalprice.toFixed(2);
  }
})

document.getElementById("bookingForm").addEventListener("click", function(e) {
  if (e.target.name === "delivery") {
    let totalprice = 0;
    [...document.querySelectorAll('input[data-price][type=radio]')].forEach(function(box) {
      if (box.checked) {
        totalprice += +box.dataset.price;
      }
    })
    document.querySelector("[name=total]").value = totalprice.toFixed(2);
  }
})

<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  <section id="bookEvents">
    <h2>Select Events</h2>
    <div class='item'>
      <span class='eventTitle'>Event number 1</span>
      <span class='eventPrice'>10.50</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
    </div>
    <div class='item'>
      <span class='eventTitle'>Event number 2</span>
      <span class='eventPrice'>5.00</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
    </div>
    <section id="Cost">
      <input type="radio" name="delivery" value="ticket" data-price="10">
      <h2>Total Price</h2>
      Total Price <input type="text" name="total" size="12">
    </section>

    <p><input type="submit" name="submit" value="Book"></p>
  </section>
</form>

Answer 1

只有一个事件处理程序和一个循环

如果您只有需要循环的元素的数据价格，那么您可以更改

[...document.querySelectorAll('input[data-price][type=checkbox], input[data-price][type=radio]')].forEach(function(box) {

到

[...document.querySelectorAll('input[data-price]')].forEach(function(box) {

我只是想知道为什么你只有一个 radio - 它不能被取消选择。为什么不是另一个复选框？

const form = document.getElementById('bookingForm');
const total = document.getElementById('total');
form.addEventListener("click", function(e) {
  if (e.target.name === "event[]" || e.target.name === "delivery") {
    let totalprice = 0;
    [...document.querySelectorAll('input[data-price][type=checkbox], input[data-price][type=radio]')].forEach(function(box) {
      if (box.checked) {
        totalprice += +box.dataset.price;
      }
    })
    document.querySelector("[name=total]").value = totalprice.toFixed(2);
  }
})

<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  <section id="bookEvents">
    <h2>Select Events</h2>
    <div class='item'>
      <span class='eventTitle'>Event number 1</span>
      <span class='eventPrice'>10.50</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
    </div>
    <div class='item'>
      <span class='eventTitle'>Event number 2</span>
      <span class='eventPrice'>5.00</span>
      <span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
    </div>
    <section id="Cost">
      <input type="radio" name="delivery" value="ticket" data-price="10">
      <h2>Total Price</h2>
      Total Price <input type="text" name="total" size="12">
    </section>

    <p><input type="submit" name="submit" value="Book"></p>
  </section>
</form>