如果使用 JavaScript 選中復選框，則會發出獲取復選框值類並添加它們的問題

Question

我有 20 個左右帶有add類的復選框類型的 HTML 輸入。 我正在嘗試使用一個普通的 JavaScript 函數來查找被檢查的函數並從中獲取值，然后將它們相加並顯示總和。 可悲的是，我似乎無法正確提取這些值。

我一直在嘗試使用document.getElementsByClassName獲取復選框值，然后循環遍歷以在選中這些框時取出值

function figure() {
    var totalCost = 0;
    var x = document.getElementsByClassName('add');
    var i = 0;
    for (i = 0; x.length; i++) {
        if (x[i].checked) {
            totalCost = totalCost + parseFloat(x[i].value);
        }
    }
    document.getElementById("TOTAL").innerHTML = "$" + totalCost;
}

我希望顯示所有選中的框，但在Chrome 中我什么也沒得到，並且出現以下錯誤。

packageCal.html:151 未捕獲的類型錯誤：無法在 HTMLInputElement.onclick (packageCal.html:142) 處讀取圖 (packageCal.html:151) 處未定義的屬性 'checked'" 第 151 行是“if (x[i].checked) {

Answer 1

在 for 循環中，循環繼續的條件不正確。 我在下面粘貼了更正后的代碼。

function figure() {
var totalCost = 0;
var x = document.getElementsByClassName('add');
var i = 0;
for (i = 0; i<=x.length; i++) {
    if (x[i].checked) {
        totalCost = totalCost + parseFloat(x[i].value);
    }
}
document.getElementById("TOTAL").innerHTML = "$" + totalCost;

}

如果錯誤仍然存​​在，請檢查分配了您正在搜索的類名的所有元素。