检查可变数量的html文本输入值的总和

我正在构建一个购物车，每个产品至少有2种颜色和5种不同的尺寸。当有人订购这种产品他必须填写以下表格：检查可变数量的html文本输入值的总和

<table cellspacing="0"> 
      <thead> 
       <tr> 
        <th class="tcl" scope="col">COLOUR/SIZE</th> 
        <th class="tc2" scope="col">34</th> 
        <th class="tc3" scope="col">36</th> 
        <th class="tcr" scope="col">38</th> 
        <th class="tcr4" scope="col">40</th> 
        <th class="tcr4" scope="col">42</th> 

        <th class="tcr4" scope="col">44</th> 
        <th class="tcr4" scope="col">48</th> 
       </tr> 
      </thead> 
      <tbody> 
      <tr class="tcl"> 
       <td class="tcl"> 
       <div class="intd"> 

        <div class="tclcon"> 
        <img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-black-mlh-2e299d-pm.jpg" width="20" height="20" border="0" /><br /> 
        black</div> 
       </div> 
       </td> 
       <td class="tc2"><input type="text" name="qty_black_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tc3"><input type="text" name="qty_black_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr"><input type="text" name="qty_black_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 

       <td class="tcr4"><input type="text" name="qty_black_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_black_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_black_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_black_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
      </tr> 
      <tr class="tcl"> 
       <td class="tcl"> 
       <div class="intd"> 
        <div class="tclcon"> 

        <img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-powder-mlh-e6847a-pm.jpg" width="20" height="20" border="0" /><br /> 
        powder</div> 
       </div> 
       </td> 
       <td class="tc2"><input type="text" name="qty_powder_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tc3"><input type="text" name="qty_powder_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr"><input type="text" name="qty_powder_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_powder_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 

       <td class="tcr4"><input type="text" name="qty_powder_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_powder_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_powder_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
      </tr> 
      <tr class="tcl"> 
       <td class="tcl"> 
       <div class="intd"> 
        <div class="tclcon"> 
        <img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-red-mlh-959b5f-pm.jpg" width="20" height="20" border="0" /><br /> 

        red</div> 
       </div> 
       </td> 
       <td class="tc2"><input type="text" name="qty_red_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tc3"><input type="text" name="qty_red_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr"><input type="text" name="qty_red_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_red_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_red_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 

       <td class="tcr4"><input type="text" name="qty_red_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
       <td class="tcr4"><input type="text" name="qty_red_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td> 
      </tr> 
         </tbody> 
</table>

所以我的输入字段命名此约定如下："qty_" + "color name" + "size"。

哪一种最简单的方法来检查输入值的总和是否至少为3？

来源

2011-09-14 Psyche

的可能复制所有inpust的总和：HTTP：/ /stackoverflow.com/questions/2417553/jquery-calculate-sum-of-values-in-all-text-fields –

这不是重复的。每个产品的输入名称都不相同。 – Psyche

这是重复的。你可以全部添加他们相同的类（如在复制中）或使用jQuery的选择器 – RvdK

看起来您可以将表中的所有输入求和。应该是：

var total = 0; 
$.each($("input"),function(i, obj){ 
    total += parseInt($(obj).val()) || 0; 
}); 
if(total > 2){ 
    return true; 
} 
return false;

如果你有其他讨厌的领域，你可以限制使用.find关闭table元素设置，或使用检查名称更具体的输入选择：

$("input[name^='qty_']")

编辑不得不解决两件事。我在obj, i的导轨each中订购，想要i, obj。

而且，必须处理空的投入与|| 0

见工作的jsfiddle here

来源

2011-09-14 07:53:52 RSG

感谢RSG。看起来很不错。我会试试看。 – Psyche

查看JSfiddle的工作示例 – RSG

这将显示在每一行

$("table tbody tr").each(function() { 
    var sum = 0; 
    $(this).find("td:gt(0) input[type=text]").each(function() { 
     sum += $(this).val() * 1; 
    }); 
    alert(sum) 
});

来源

2011-09-14 08:02:20

检查可变数量的html文本输入值的总和

回答

相关问题