如何使用复选框和自动求和功能读取多个值?

huangapple go评论60阅读模式
英文:

How to read multiple value with checkboxes and autosum?

问题

我解决了自动求和的问题,但问题是当我选择1或2个项目或产品时,它会记录所有的产品。我应该怎么办?

我希望能够根据我选择的项目名称或列表自动求和总金额。

HTML/PHP

<input type="hidden" class="test" name="request_test[]" onclick="autoSum(this);" i="" value="CBC">
<input type="checkbox" class="test" onclick="autoSum(this);" i="" value="50" data-price="50">

<input type="hidden" class="test" name="request_test[]" onclick="autoSum(this);" i="" value="FBS">
<input type="checkbox" class="test" onclick="autoSum(this);" i="" value="200">

JavaScript

var total = 0;
function autoSum(elem) {
    if (elem.checked == true) { 
        total += Number(elem.value); 
    } else {
        total -= Number(elem.value);
    }
    document.getElementById('amount').value = total.toFixed(0);
}
英文:

I solve the autosum but the problem is when I choose 1 or 2 item or product it will record all the product. What should I do?

I expected to autosum the total amount with item name or list I chose.

HTML/PHP

&lt;input type=&quot;hidden&quot; class=&quot;test&quot; name=&quot;request_test[]&quot; onclick=&quot;autoSum(this);&quot; i=&quot;&quot; value=&quot;CBC&quot;&gt;
&lt;input type=&quot;checkbox&quot; class=&quot;test&quot; onclick=&quot;autoSum(this);&quot; i=&quot;&quot; value=&quot;50&quot; data-price=&quot;50&quot; &gt;

&lt;input type=&quot;hidden&quot; class=&quot;test&quot; name=&quot;request_test[]&quot; onclick=&quot;autoSum(this);&quot; i=&quot;&quot; value=&quot;FBS&quot;&gt;
&lt;input type=&quot;checkbox&quot; class=&quot;test&quot; onclick=&quot;autoSum(this);&quot; i=&quot;&quot; value=&quot;200&quot;&gt;

JavaScript

var total=0;
function autoSum(elem) {
 
    if (elem.checked == true) { 
		total += Number(elem.value); 
	}else{
		total -=Number(elem.value);
	}
 
	document.getElementById(&#39;amount&#39;).value = total.toFixed(0);
}

答案1

得分: 2

你可以学习这个例子

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="checkbox" class="test" onClick="autoSum(this);" i="" value="50" data-price="50" >

  <input type="checkbox" class="test" onClick="autoSum(this);" i="" value="200">
  
  <p id="amount">0</p>
</body>
</html>

Javascript

function autoSum(elem) {
  
  var total=0;
  var allCheckBoxes = document.querySelectorAll(".test");
  
  allCheckBoxes.forEach(function(elem) {
    
    if (elem.checked === true) {
       total += Number(elem.value);
    }
  });
  document.getElementById('amount').innerHTML = total;
}

演示链接在这里 https://jsbin.com/nedadawume/edit?html,js,console,output

英文:

You can study this example

HTML

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;input type=&quot;checkbox&quot; class=&quot;test&quot; onClick=&quot;autoSum(this);&quot; i=&quot;&quot; value=&quot;50&quot; data-price=&quot;50&quot; &gt;

  &lt;input type=&quot;checkbox&quot; class=&quot;test&quot; onClick=&quot;autoSum(this);&quot; i=&quot;&quot; value=&quot;200&quot;&gt;
  
  &lt;p id=&quot;amount&quot;&gt;0&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Javascript

function autoSum(elem) {
  
  var total=0;
  var allCheckBoxes = document.querySelectorAll(&quot;.test&quot;);
  
  allCheckBoxes.forEach(function(elem) {
    
    if (elem.checked === true) {
       total += Number(elem.value);
    }
  });
  document.getElementById(&#39;amount&#39;).innerHTML = total;
}

demo link here https://jsbin.com/nedadawume/edit?html,js,console,output

huangapple
  • 本文由 发表于 2023年8月9日 14:40:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/76865182.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定