HTML / Javascript复选框在检查后无法正常工作 [英] HTML/Javascript Checkbox uncheck after checking once not functioning properly
问题描述
我有一段代码在循环中的表中创建复选框，并调用其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）{
//创建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 +，大于0！
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;
}
..
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）{
//创建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 +，大于0！
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;
}
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 position holder for the checked check boxes of the table. Also if a row is checked, I have to sum the numbers in a text field of that row(I add this to a variable percentage) and if the variable crosses 100 I have to alert the user and ask him to enter values in the checkbox such that the sum is less than 100.
What is happening is that when percentage>100 it throws an alert(that i have added). if there are 3 checkboxes have values 34,56,10 and if these 3 are selected it lets me submit a submit button. but if i go back and uncheck the row with 10, it throws alert saying percantage is 110( it should be 90)
How do I solve this issue?
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];
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;
}
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;
}
这篇关于HTML / Javascript复选框在检查后无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
