Question

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.

My problem is that each time I click a check box, the global array gets populated, sum is stored in the variable as expected, but the ‘tick’ on the check box doesn’t come/disappears immediately.

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

Answer 1

Got the culprit i guess,

Plz try replacing this

 if(parseInt(percentage,10)>100) {
              this.checked=false;
          }

          if(this.checked=false)
          {
               percentage=parseInt(percentage)-parseInt(tabId1.getElementsByTagName("input")[n].value);
          }

with this

if(parseInt(percentage,10)>100) {
              this.checked=false;
          }
          else
          {
              this.checked=true;
          }

          if(this.checked==false)
          {
               percentage=parseInt(percentage)-parseInt(tabId1.getElementsByTagName("input")[n].value);
          }