Javascript 如何使复选框值和选项值相加并将总和输入文本区域？
我正在尝试制作一个结帐/购物页面，您可以在其中选择您想要购买的商品，选择您的发货价格，当您单击“计算发货”时，您选择的商品的完整价格将显示在文本区域中 我有三个带有三个不同值的复选框和三个带有三个不同值的选项。我希望能够将选中的复选框和选项相加，并希望总和答案显示在页面底部的文本区域中。按下按钮后，答案将弹出文本区域。我的按钮id是button 如何使用javascript实现这一点 如果有人知道如何做到这一点，我将不胜感激，我正在学习如何使用javascript，我会发现阅读您的解决方案是一种非常有用的学习方式 以下是我的html中的一个片段：Javascript 如何使复选框值和选项值相加并将总和输入文本区域？,javascript,html,css,sum,Javascript,Html,Css,Sum,我正在尝试制作一个结帐/购物页面，您可以在其中选择您想要购买的商品，选择您的发货价格，当您单击“计算发货”时，您选择的商品的完整价格将显示在文本区域中 我有三个带有三个不同值的复选框和三个带有三个不同值的选项。我希望能够将选中的复选框和选项相加，并希望总和答案显示在页面底部的文本区域中。按下按钮后，答案将弹出文本区域。我的按钮id是button 如何使用javascript实现这一点 如果有人知道如何做到这一点，我将不胜感激，我正在学习如何使用javascript，我会发现阅读您的解决方案是一种
<body>
<form action="script.php" method="get" id="myform">
<h1>Select a product below:</h1>
<div>
<p>Product 1</p> €25.00<input type = "checkbox" name = "25" value = "25" id="cb1" class="sum"><br>
<p>Product 2</p> €50.00<input type = "checkbox" name = "50" value = "50" id="cb2" class="sum"> <br>
<p>Product 3</p> €100.00<input type = "checkbox" name = "100" value = "100" id="cb3" class="sum">
</div>
<h2>
Where do you want the products delievered to:
</h2>
<div><select>
<option value="select">Select a shipping option..</option>
<option value="2">Ireland (2.00)</option>
<option value="3">Rest of Europe (3.00)</option>
<option value="7">Rest of World (7.00)</option>
</select></div>
<div>
<textarea cols="20" rows="1" id="shipping">Shipping</textarea>
</div>
<input type = "submit"
value = "Calculate Shipping"
id="button"
>
</form>
</body>
对不起，我的问题太长了，如果有人能帮我，那就太好了：您可以使用Javascript来完成这项工作。使用Jquery获取输入的所有值，求和并使用Jquery将它们设置为textarea
var numbers = $("input:checked").val();
var sum = numbers.reduce(function(sum, i) { return sum + i}, 0);
$("#shipping").val(sum);
如果您使用的是按钮类型submit，那么它会将表单提交到script.php，除非您阻止它使用javascript提交 我建议您将按钮类型设置为button而不是submit 要进行计算，可以使用如下javascript
var inputs, index, sum;
sum = 0;
inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// deal with inputs[index] element.
var el = inputs[index];
if (el.type && el.type === 'checkbox' && el.checked) {
sum += inputs[index].value;
}
}
此外，您还应该为复选框使用适当的名称，因为它们将在实际表单提交时在scripts.php中引用。感谢您的回复！很抱歉成为一个noob，但是我必须对我的当前代码做些什么才能使您的解决方案工作？谢谢您的回复！很抱歉，我对这个很陌生，但是我必须对我当前的代码做些什么才能使您的解决方案与我的解决方案一起工作？您需要向您的网站添加一个包含JS代码的标记。此外，您需要为按钮的submit或click事件添加一个事件侦听器。我建议您进一步了解Javascript和事件处理程序。看一看：免费谢谢你，我终于明白了！：
var inputs, index, sum;
sum = 0;
inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// deal with inputs[index] element.
var el = inputs[index];
if (el.type && el.type === 'checkbox' && el.checked) {
sum += inputs[index].value;
}
}