2020年1月6日 20:55:43go评论71阅读模式

英文:

How to prevent checkbox loop and radio button loop from creating two separate price totals

问题

我有一个选择复选框的查询选择器，它运行良好，并且我为单选按钮复制了它，但我遇到了一个问题，它们都保持独立的总数。我尝试将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>

请注意，我已经将两个事件监听器合并成一个以避免问题。

英文:

I have a query selector for checkboxes which works fine and I replicated it for radio button, but I am running into the problem that they are both keeping separate totals. I tried to take the totalPrice variable out of both of them and place it outside so that it would be shared, but that created the problem of the price not being removed from unchecked checkboxes and radio buttons.

This is my current buggy code:

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

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

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

    &lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot;&gt;&lt;/p&gt;
  &lt;/section&gt;
&lt;/form&gt;

答案1

得分: 1

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

如果你只在需要循环的元素上有 data-price，那么你可以将以下代码：

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

更改为：

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

我只是想知道为什么你只有一个单选按钮 - 它不能取消选择。为什么不使用另一个复选框？

<input type="radio" name="delivery" value="ticket" data-price="10">

英文:

Just have one event handler and one loop

If you only have data-price on the elements you need to loop, then you can change

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

[...document.querySelectorAll(&#39;input[data-price]&#39;)].forEach(function(box) {

I just wonder why you have a only a single radio - it cannot be un-selected. Why not another checkbox?

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

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

    &lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot;&gt;&lt;/p&gt;
  &lt;/section&gt;
&lt;/form&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何防止复选框循环和单选按钮循环创建两个不同的价格总计。

问题

答案1

如何修复Remix错误：必须在数据路由器内使用useFetcher？

如何将for循环中的偶数和奇数结果总和都推送到一个数组中？

递归对象构建

在已编织的HTML文档中返回一个包含多个DT::datatables的列表。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论