从多个复选框中获取值答案

【问题标题】：Getting values from multiple checkboxes从多个复选框中获取值
【发布时间】：2014-02-08 05:34:23
【问题描述】：

我有这个复选框

<input type="checkbox" class="calc" name="access[a]" value="1" />
<input type="checkbox" class="calc" name="access[b]" value="2" />
<input type="checkbox" class="calc" name="access[c]" value="3" />
<input type="checkbox" class="calc" name="access[d]" value="4" />

我需要以下东西，我将在一个例子中解释它：假设我选择了第一个和第二个复选框，然后将发送 "ab"([access[a]+access[b]) 和 "3"(1+2)。

编辑1：你没有理解我。我想要发送 2 个东西，计算价值和访问[价值]。

示例：用户选择第三个和第四个字段，将发送 7(3+4) 和 cd ([access[c]+access[d])。

【问题讨论】：

标签： jquery ajax checkbox

【解决方案1】：

又一个普通的解决方案：

var res = [ ].reduce.call( document.querySelectorAll( 'input.calc:checked' ), function( a, b ) {
    return a + (+b.value || 0);
}, 0);

演示：http://jsfiddle.net/fsbTS/

【讨论】：

不错。 var $ = function(sel){ return Array.prototype.slice.call(0,document.querySelectorAll(sel)); } 和 function sum(a,b){ return a+b} 可以让你做（没有 80kb 的库！）做 var res = $("input.calc:checked").,map(getValue).reduce(sum) 类似 jsfiddle.net/x6374
每个人似乎都误解了我的问题。我更新了我的问题，你介意检查一下吗？

【解决方案2】：

强制性的香草答案：

按类抓取数组中的元素（也可以使用querySelectorAll(".calc")（或[name*='access']等）

循环元素数组，检查选中的属性，并添加到总和（确保将值解析为 Int 以避免NaN 问题）

var sum = 0;
var x = document.getElementsByClassName("calc");
for (var i=0; i<x.length; i++) {
    if (x[i].checked) sum+= parseInt(x[i].value,10); //parse as int
}

【讨论】：

【解决方案3】：

你可以简单地遍历它

var added= 0;
$(".calc:checkbox:checked").each(function () {
    added += +$(this).val();
});

DEMO

【讨论】：