Html/javascript Checkbox Uncheck After Checking Once Not Functioning Properly

I have a piece of code that creates check boxes in a table in a loop and calls their onclick function. In the onclick function, I try to populate a global array that will be a posi

Solution 1:

Try this code.....

    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;
    }