ループ内のテーブルにチェックボックスを作成し、それらの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;
}