2020年1月6日 19:24:06go评论84阅读模式

英文:

Trying to total price with checkbox loop using JavaScript

问题

以下是您要翻译的内容：

我的目标是，当点击复选框时，它的data-price应该被添加到total变量中，然后这个变量应该显示在总价格文本框中，然而，目前当点击复选框时它不会更新值。

这是一个交互式示例，展示了它当前的工作/外观：

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

<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
	<section id="bookEvents">
		<h2>选择事件</h2>

		<div class='item'>
			<span class='eventTitle'>事件编号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'>事件编号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">
			<h2>总价</h2>
			总价 <input type="text" name="total" size="12">
		</section>
		<p><input type="submit" name="submit" value="预订"></p>
	</section>
</form>

英文:

My goal is when a checkbox is clicked it's data-price should be added to the total variable and then this variable should be shown in the total price text box, however, it currently doesn't update the value when a checkbox is clicked.

Here is an interactive example of how it currently works/looks:

const form = document.getElementById(&#39;bookingForm&#39;);
const total = document.getElementsByName[0](&#39;total&#39;);
document.getElementById(&quot;bookingForm&quot;).addEventListener(&quot;click&quot;, function(e) {
  if (e.target.name === &quot;event[]&quot;) {
    let total = 0;
    [...document.querySelectorAll(&#39;input[data-price][type=checkbox]&#39;)].forEach(function(box) {
      if (box.checked) {
        total += +box.dataset.price;
      } //if
    })
    document.querySelector(&quot;[name=total]&quot;).innerHTML = total.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;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

以下是您要求的代码部分的翻译：

const form = document.getElementById('bookingForm');
const total = document.getElementsByName('total');
var chksBoxes = document.querySelectorAll('.chkEvent');

chksBoxes.forEach(function(chk) {
  chk.addEventListener("click", function(e) {
    var total = 0;
    chksBoxes.forEach(function(box) {
      if (box.checked)
        total += +box.dataset.price
    });
    document.querySelector("[name=total]").value = total.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'>Price: 10.50</span>
      <span class='chosen'><input type='checkbox' class="chkEvent" name='event[]' value='1' data-price='10.50'></span>
    </div>
    <div class='item'>
      <span class='eventTitle'>Event number 2 </span>
      <span class='eventPrice'>Price: 5.00</span>
      <span class='chosen'><input type='checkbox' class="chkEvent" name='event[]' value='2' data-price='5.00'></span>
    </div>
    <section id="Cost">
      <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>

请注意，我只翻译了您提供的代码部分，没有包括其他内容。

英文:

const form = document.getElementById(&#39;bookingForm&#39;);
const total = document.getElementsByName(&#39;total&#39;);
var chksBoxes = document.querySelectorAll(&#39;.chkEvent&#39;);

chksBoxes.forEach(function(chk) {
  chk.addEventListener(&quot;click&quot;, function(e) {
    var total = 0;
    chksBoxes.forEach(function(box) {
      if (box.checked)
        total += +box.dataset.price
    });
    document.querySelector(&quot;[name=total]&quot;).value = total.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;Price: 10.50&lt;/span&gt;
      &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; class=&quot;chkEvent&quot; 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;Price: 5.00&lt;/span&gt;
      &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; class=&quot;chkEvent&quot; 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;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;

答案2

得分: 0

对于 Input 元素，你应该使用 value 而不是 innerHTML。

const form = document.getElementById('bookingForm');
const total = document.getElementsByName('total')[0];
document.getElementById("bookingForm").addEventListener("click", function(e) {
  if (e.target.name === "event[]") {
    let total = 0;
    [...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
      if (box.checked) {
        total += +box.dataset.price;
      } //if
    })
    document.querySelector("[name=total]").value = total.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">
      <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>

PS: 你在 第2行 有一个拼写错误，应该是 document.getElementsByName('total')[0]; 而不是 document.getElementsByName[0]('total');。

英文:

For Input elements you should use value instead of innerHTML

const form = document.getElementById(&#39;bookingForm&#39;);
const total = document.getElementsByName(&#39;total&#39;)[0];
document.getElementById(&quot;bookingForm&quot;).addEventListener(&quot;click&quot;, function(e) {
  if (e.target.name === &quot;event[]&quot;) {
    let total = 0;
    [...document.querySelectorAll(&#39;input[data-price][type=checkbox]&#39;)].forEach(function(box) {
      if (box.checked) {
        total += +box.dataset.price;
      } //if
    })
    document.querySelector(&quot;[name=total]&quot;).value = total.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;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;

PS: You have a typo at line# 2 where document.getElementsByName[0]('total'); should actually be document.getElementsByName('total')[0];

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

尝试使用JavaScript循环复选框来计算总价格。

问题

答案1

答案2

如何在鼠标悬停时突出显示
元素？

How can I write a javascript function with the if/else statement to check whether a <div> class contains a <img> or <img> class

如何修复我的代码中的fetch问题？我遇到了问题，无法继续完成这个网站。

NextJS Multer没有上传完整文件（仅195KB）

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 在上下文菜单中以大文本形式打开

发表评论