我想从HTML模板中添加特定的输入，并使用JavaScript添加它们。我已经达到了可以添加所有输入的部分，但我希望能够按ID指定输入，以便可以有不同的小计。

以下是我要查看的内容的打印屏幕：

我想添加第1项和第2项，得到一个小计。加上第3项、第4项和第5项，得到小计。然后将2个小计加在一起。

('[type="number"].form-control')

我的问题： 如何将第1项和第2项相加得到小计1，然后将第3项和第4项相加得到小计2，然后将这2项相加得到总计。

顺晟科技：

我已经编成了我要在这里解释的代码的代码本（在JS中也有注释）:https://codepen.io/marcusparsons/pen/vyzrvpy?editors=1010

实现这种功能的最佳方法是将输入与多个绑定类组合在一起。我所做的是为目标组添加一个额外的主类和一个子集类，这样可以动态计算各个组（这意味着在一个组中可以有任意数量的输入，每个值都将被考虑在内，而无需额外的代码）。而且，他们每个人都有一个初级班，因为我们也得到了一个大的总数。

例如，要将项1和项2一起添加到小计1中。嗯，你可以手动完成，但我总是问这样一个问题，“如果我有1000个输入，我想等于小计1呢？”在这种情况下，类非常方便，如下所示（我删除了一些服务器端代码，以便能够使用所需的HTML和JS):

('[type="number"].form-control')

基本上，第1项和第2项得到了and类。然后第3、4和5项得到了And类。

然后，在JavaScript中，我针对每个分组，并将它们应用到所需的目标元素。我还将event关键字更改为from，因为如果只针对输入，您将错过单击/触摸向上和向下箭头时发生的事件，也将错过从用户复制/粘贴事件。如果有疑问，我会选择over来收听该事件。

('[type="number"].form-control')

然后冲洗，并对随后的每一组重复:

('[type="number"].form-control')

要获得最终的组总数，只需针对主类:

('[type="number"].form-control')