title: Checkbox check/tick not showing up though checked attribute returns true
body: <p>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.</p>
  
  <p>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 <strong>the 'tick' on the check box doesn't come/disappears immediately</strong>.</p>
  
  <p>How do I solve this issue?</p>
  
  <p>Code:</p>
  
  <pre><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&lt;=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)&gt;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) &amp;&amp; el.nodeName.toLowerCase() != 'tr');
  if (el)
  return el.rowIndex;
  }
  </code></pre>