将jquery选择限制为特定形式

时间:2015-02-11 14:47:36

标签: jquery forms scope

我有一个页面,上面有多个表格&我很难从每个值中获取值来为各个表提供总计。 HTML是动态生成的&我无法修改它。以下是每个表单的外观(但每次运行时它们都会有不同的行数....

<form>
<input type=number class="entries" onchange="addTotal();">
<input type=number class="entries" onchange="addTotal();">
<input type=number class="totals">
</form>

这是我必须添加每个表格和功能的功能。将总计放在“总计”框中。这对于第一种形式非常有用,但问题是无论我输入哪种形式的值,它都会以“总计”的形式汇总所有内容。

function addTotal() {
  var entry = $('.entries').get();
  var total = 0;
  for (var i = 0; i < entry.length; i++) {
      if(Number(entry[i].value))
          total += Number(entry[i].value);
   }
   $('.totals').value = total;
  };

我也尝试摆脱onchange动作&amp;试图将每个表单称为'this',但我似乎无法以这种方式获取所有值,我只得到一个数组......

$(.entries').change(function() {
var entry = ($(this.form).get());
  console.log(entry);
});

我敢肯定有一些显而易见的事情我会失踪,但我似乎无法得到我需要的东西。任何建议,将不胜感激!!

2 个答案:

答案 0 :(得分:1)

更新现在可以使用任意数量的字段 这是一个小提琴:http://jsfiddle.net/vx403ax0/6/

$(document).ready(function () {
    $(".entries").change(function () {
        $("form").each(function () {
           var result = 0;
            $(this).find(".entries").each(function(i, el){
                result += parseInt(el.value);
            });
            if(isNaN(result)){
            return;
            } else{
           $(this).find(".totals").val(result);
            }
        });
    });
});

答案 1 :(得分:1)

这可能效率低下,但可以完成工作。

$(document).ready(function () {
    $(".entries").change(function () {
        $("form").each(function () {
            $form = $(this);
            $val = 0;
            $form.find('input:not(.totals)').each(function (i, el) {
                if ($(el).val() !== '') {
                    $val += parseInt($(el).val());
                }
            });
            $form.find(".totals").val($val);
        });
    });
});

Herr是基于ChrisJ评论的小提琴:http://jsfiddle.net/d9boLc13/