javascript - 具有多个输入名称的 getElementsByName

Question

我正在为我制作一些自动求和输入计算器，但我遇到了问题，因为我不知道如何选择具有不同名称的多个输入。我知道我可以只使用“输入”而不是确切的名称，但我需要只对 5-6 个输入进行计算，而不是全部，所以请帮助我这样做......

代码现在看起来像这样:

<script type="text/javascript">
function findTotal(){
    var arr = document.getElementsByName('test1');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = tot;
}
</script>

所以我想准确计算 test1、test2、test3、test4、test5 输入。

谢谢

Answer 1

您可以使用多个 attribute selectors与 querySelectorAll() :

var arr = document.querySelectorAll('[name="test1"], [name="test2"], [name="test3"], [name="test4"], [name="test5"]');

---

不过，如果它们共享一个共同的 class 名称，您可以 select them by that :

<input name="test1" class="totaled">
<input name="test2" class="totaled">
<!-- etc. -->

var arr = document.querySelectorAll('.totaled');

或者，如果它们共享一个共同的父元素，您可以 find them from it :

<div id="the-parent">
    <input name="test1">
    <input name="test2">
    <!-- etc. -->
</div>

var arr = document.querySelectorAll('#the-parent input');

// or
var arr = document.getElementById('the-parent').getElementsByTagName('input');