使用 Javascript 在复选框中进行计算

Question

我在 Twitter Bootstrap 中有一个复选框列表，格式如下：

<form method='post' class="form-horizontal" id="myform">
   <input type="checkbox" attr1="2" attr2="4" prodname="product1"> product1
   <input type="checkbox" attr1="5" attr2="1" prodname="product2"> product2
   <input type="checkbox" attr1="1" attr2="7" prodname="product3"> product3
   ....
   ....
   <button type="submit" class="btn btn-success pull-right">Calculate</button>
</form>

用户将选择部分产品（不是全部）并单击提交按钮以查看基于以下公式的结果：

finalvalue = sum_of_attr1/total_num_checked + 10*best_prod_attr1 - best_prod_attr2

这意味着我必须找到所有已选中复选框的 attr1 的总和以及选中了多少个，然后尝试每个选中的复选框以查看其中哪个会给出最大值。然后我会用最终值和最佳产品的prodname 更新一个div。

我不想在服务器端执行此操作，我想使用 Javascript/JQuery 进行尝试。有什么想法吗？

Answer 1

对于“最佳”计算：请参阅这个 SO 问题：jQuery: How to calculate the maximal attribute value of all matched elements?

选中复选框的数量：How to count check-boxes using jQuery?

在评论后编辑并更好地表达预期行为：

var sumAttr1 = null;
var bestProductName = null;
var maxScorePart = null;

// Browse each checked input to get the sum of attr1 and get the best product
$('input:checkbox:checked').each(function() {
    var valueAttr1 = parseInt($(this).attr('attr1'));
    var valueAttr2 = parseInt($(this).attr('attr2'));

    // Cumulate attr1 for final calc
    sumAttr1 += valueAttr1;

    // Check best prod
    var currentScorePart = 10 * valueAttr1 - valueAttr2;
    if(currentScorePart > maxScorePart) {
        maxScorePart = currentScorePart;
        bestProductName = $(this).attr('prodname');
    }
});

var maxScore = sumAttr1 / $('input:checkbox:checked').length + maxScorePart;
alert('Best product = ' + bestProductName + '\r\nBest product score = ' + maxScore);

查看工作示例：http://jsfiddle.net/5whctawh/