代码之家 › 专栏 › 技术社区 › Tzar

计算复选框的总和

forms javascript

Tzar · 技术社区 · 7 年前

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>

我在计算时做错了什么?

4 回复 | 直到 7 年前

Unmitigated 7 年前

移除 break 这将阻止 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();
}

<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>

eje211 7 年前

你好像来自PHP。

在JavaScript中,有几个数据结构以原语或对象的形式存在。对于数组,这是基元:

var anArray = [];

这就是目标:

var anArray = new Array();

如果两者都存在,就永远不要使用对象。只能在内部使用。

另外,JavaScript没有关联数组或字典。它只有它所谓的对象。在引擎盖下,它们是一样的,但这意味着:

colors["blue"]

和

colors.blue

都是一样的。如果第二种形式是可能的,但并非总是如此,则首选第二种形式。

现在,为您的HTML。

name . 名称 class 或 id 班 ,但实际上,你不需要。把一个 身份证件 fieldset 元素可能足以到达 input 元素。

所以,让我们试试jQuery。

请试穿以下尺码: https://jsfiddle.net/8tf25zw9/3/

truleighsyd 7 年前

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>

Swapnil Bret Hogg 7 年前

正如其他人所说 extrasPricing

“…”是一个扩展运算符,它将NodeList(与documentQuerySelectorAll一起返回)转换为一个数组,然后该数组可以使用各种数组方法将值映射到一个新数组,然后将值减少到一个总数。

(extrasCost.length > 0) ,或 return 0

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>