檢查一次後，HTML/Javascript複選框取消選中後，功能不正常

Question

我有一段代碼在循環的表格中創建複選框，並調用它們的onclick函數。在onclick函數中，我嘗試填充一個全局數組，該數組將成爲表格的選中複選框的位置持有者。此外，如果一行被選中，我必須將該行的文本字段中的數字相加（我將其添加到變量百分比），如果變量超過100，我必須提醒用戶並要求他在複選框中輸入值使得總和小於100.

發生的事情是，當百分比大於100時，它會引發警報（我已添加）。如果有3個複選框的值爲34,56,10，並且如果選擇了這3個，則允許我提交一個提交按鈕。但如果我回去並取消與10行，它會引發警告說percantage是110（它應該是90）

如何解決此問題？

代碼：

var tabId = document.getElementById("AmnestyTransTbl"); 
    var tabrows = tabId.getElementsByTagName('tr'); 

    var percentage = 0, 
     c, n; 
    var ar = []; 
    for (var i = 1, c = 2; i <= tabrows.length - 3; i++, c = c + 2) { 
     // Create CheckBox 
     ar[i] = c; 
     var checkBox = document.createElement("input"); 
     checkBox.setAttribute("type", "checkbox"); 
     checkBox.id = 'CB'.concat(i); 
     checkBox.onclick = function() { 

      var tabId1 = document.getElementById("AmnestyTransTbl"); 
      var rowInd = getRowIndex(this); 

      CBValue[rowInd] = this.checked; 
      n = ar[rowInd - 1]; 
      percentage = (parseInt(percentage) + parseInt(tabId1.getElementsByTagName("input")[n].value)); 
      if (parseInt(percentage) > 100) { 
       alert("Amnesty Percentage," + percentage + ", greater than 0!. Plesase check again."); 
       this.checked = false; 
      } 
      if (this.checked == false) percentage = parseInt(percentage) - parseInt(tabId1.getElementsByTagName("input")[n].value); 
     } 
    } 
    var td = document.createElement("td"); 
    td.appendChild(checkBox); 
    tabrows[i + 1].cells[1].appendChild(td); 
    } 

    function getRowIndex(el) { 
     while ((el = el.parentNode) && el.nodeName.toLowerCase() != 'tr'); 
     if (el) return el.rowIndex; 
    } 

Answer 1

試試這個代碼.....

var tabId = document.getElementById("AmnestyTransTbl"); 
    var tabrows = tabId.getElementsByTagName('tr'); 

    var percentage = 0, 
     c, n; 
    var ar = []; 
    for (var i = 1, c = 2; i <= tabrows.length - 3; i++, c = c + 2) { 
     // Create CheckBox 
     ar[i] = c; 
     var checkBox = document.createElement("input"); 
     checkBox.setAttribute("type", "checkbox"); 
     checkBox.id = 'CB'.concat(i); 
     checkBox.onclick = function() { 

      var tabId1 = document.getElementById("AmnestyTransTbl"); 
      var rowInd = getRowIndex(this); 

      CBValue[rowInd] = this.checked; 
      n = ar[rowInd - 1]; 
      if (this.checked == false) 
       percentage = parseInt(percentage) - parseInt(tabId1.getElementsByTagName("input")[n].value); 
      else 
       percentage = (parseInt(percentage) + parseInt(tabId1.getElementsByTagName("input")[n].value)); 
      if (parseInt(percentage) > 100) { 
       alert("Amnesty Percentage," + percentage + ", greater than 0!. Plesase check again."); 
       this.checked = false; 
      } 

     } 
    } 
    var td = document.createElement("td"); 
    td.appendChild(checkBox); 
    tabrows[i + 1].cells[1].appendChild(td); 
    } 

    function getRowIndex(el) { 
     while ((el = el.parentNode) && el.nodeName.toLowerCase() != 'tr'); 
     if (el) return el.rowIndex; 
    }