Question

我想计算复选框的总和并将结果打印到表单输入值，但是此代码不起作用：

var calculator = document.querySelector("form");

function extras() {
	var extrasPricing = new Array();
	extrasPricing["candles"] = 5;
	extrasPricing["inscription"] = 10;
	extrasPricing["decoration"] = 25;
	extrasPricing["special"] = 50;

	var extrasCost = 0;
	var extras = calculator.elements["extras"];

	for (var i = 0; i < extras.length; i++) {
		if (extras[i].checked) {
			extrasCost = extrasCost + extrasPricing[extras[i].value];
			break;
		}
	}
	return extrasCost;
}

function calculateTotal() {
	calculator.total.value = "$" + extras();
}

<form>
<fieldset>
<legend>Select Extras</legend>
<label><input type="checkbox" name="extras" value="candles" onclick="calculateTotal()">Candles</label><br>
<label><input type="checkbox" name="extras" value="inscription" onclick="calculateTotal()">Inscription</label><br>
<label><input type="checkbox" name="extras" value="decoration" onclick="calculateTotal()">Decoration</label><br>
<label><input type="checkbox" name="extras" value="special" onclick="calculateTotal()">Special Frosting & Icing</label>
</fieldset>

<input type="text" name="total" readonly>
<input type="submit" value="Submit">
</form>

执行计算时我怎么了？

Answer 1

您似乎来自PHP。

您的代码有几个问题。

在JavaScript中，有几种数据结构以原语或对象形式存在。对于数组，这是原始的：

var anArray = [];

这是对象：

var anArray = new Array();

当两者同时存在时，切勿使用该对象。只能在内部使用。

此外，JavaScript没有关联数组或字典。它只有所谓的对象。在幕后，他们是同一回事，但这意味着：

colors["blue"]

和

colors.blue

是同一回事。如果第二种形式（并非总是如此）是可能的，则首选第二种形式。

现在，为您的HTML。

请勿使用name。 name已过时。使用class或id。在这里，您可以使用class，但实际上并不需要。将id放在fieldset元素上可能足以访问您的input元素。

您不应在HTML内编写JavaScript。有许多解决该问题的方法。最简单的就是简单地使用jQuery。如果这样做，将是jQuery，它将回调附加到HTML，以使HML和JavaScript保持美观和独立。更好的方法是使用甚至更完整的框架，如React，Vue或Angular，但这些框架现在可能更难于学习了。

因此，让我们尝试使用jQuery。

尝试以下尺寸：https://jsfiddle.net/8tf25zw9/3/

Answer 2

删除str.format，这将停止break循环。您的for循环只会以这种方式获取第一个选中的复选框的值。您的逻辑有缺陷；仅仅因为您发现一个选中的复选框并不意味着您的计算已经完成。您需要添加所有选中复选框的值。

for

var calculator = document.querySelector("form");

function extras() {
	var extrasPricing = new Array();
	extrasPricing["candles"] = 5;
	extrasPricing["inscription"] = 10;
	extrasPricing["decoration"] = 25;
	extrasPricing["special"] = 50;

	var extrasCost = 0;
	var extras = calculator.elements["extras"];

	for (var i = 0; i < extras.length; i++) {
		if (extras[i].checked) {
			extrasCost = extrasCost + extrasPricing[extras[i].value];
                //Do not break here
		}
	}
	return extrasCost;
}

function calculateTotal() {
	calculator.total.value = "$" + extras();
}

Answer 3

这是您的代码的有效示例。 eje211上面也指出了一些语法错误。

var calculator = document.querySelector("form");

function extras() {
  // Object vs Array
  var extrasPricing = {
    candles: 5,
    inscription: 10,
    decoration: 25,
    special: 50
  }

  var extrasCost = 0;
  var extras = document.getElementsByName("extras");

  for (var i = 0; i < extras.length; i++) {
    if (extras[i].checked) {
      var val = extras[i].value;
      // Update here to add/remove value of checked item to previous checked item.
      extrasCost += extrasPricing[val];
    }
  }
  return extrasCost;
}

function calculateTotal() {
  calculator.total.value = "$" + extras();
}

<form>
  <fieldset>
    <legend>Select Extras</legend>
    <label><input type="checkbox" name="extras" value="candles" onclick="calculateTotal()">Candles</label><br>
    <label><input type="checkbox" name="extras" value="inscription" onclick="calculateTotal()">Inscription</label><br>
    <label><input type="checkbox" name="extras" value="decoration" onclick="calculateTotal()">Decoration</label><br>
    <label><input type="checkbox" name="extras" value="special" onclick="calculateTotal()">Special Frosting & Icing</label>
  </fieldset>

  <input type="text" name="total">
  <input type="submit" value="Submit">
</form>

Answer 4

正如其他人所指出的那样，您的extrasPricing确实需要成为对象才能更轻松地访问它。您也可以使用CSS选择器documentQuerySelectorAll选择选中的元素。

'...'是一个传播运算符，它将NodeList（随documentQuerySelectorAll返回）转换为数组，然后可以使用各种数组方法将值映射到新数组，然后减少总价值。

如果数组为空，则Reduce会引发错误，因此，如果数组具有元素(extrasCost.length > 0)，则使用三元运算符返回reduce输出；如果数组为空，则返回到return 0。 / p>

function extras() {
  const extrasPricing = {
  candles: 5,
  inscription: 10,
  decoration: 25,
  special: 50,
  };  

  let extrasCost =  [...document.querySelectorAll('input[name=extras]:checked')]
      .map((el) => extrasPricing[el.value])

  return extrasCost.length > 0 ? extrasCost.reduce((total, num) => total + num) : 0;
}

function calculateTotal() {
  calculator.total.value = '$' + extras();
}



<form>
  <fieldset>
    <legend>Select Extras</legend>
    <label><input type="checkbox" name="extras" value="candles" onclick="calculateTotal()">Candles</label><br>
    <label><input type="checkbox" name="extras" value="inscription" onclick="calculateTotal()">Inscription</label><br>
    <label><input type="checkbox" name="extras" value="decoration" onclick="calculateTotal()">Decoration</label><br>
    <label><input type="checkbox" name="extras" value="special" onclick="calculateTotal()">Special Frosting & Icing</label>
  </fieldset>

  <input type="text" name="total">
  <input type="submit" value="Submit">
</form>

计算选中复选框的总和

4 个答案: