Member Avatar for moonknight33

Please help me, my check/uncheck all boxes javascript example work not normally in IE8, but Firefox and Chrome, when I click to box with id "chkAll" to control other box with id "chkId", nothing happen in IE8 but a dotted border outline the checkbox, when I click to outside the checkbox (in page), it continue work (control box with id "chkId") like Firefox and Chrome, what happened? How do I resolve it?

Edited by moonknight33 because: n/a
  • 2 Contributors
  • 2 Replies
  • 170 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by moonknight33
Member Avatar for scrappedcola

Could you provide code sample (ie HTML and Javascript) for the checkbox in question?

Member Avatar for moonknight33

Ok this is HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Table checkbox</title>
	<script type="text/javascript" language="javascript" src="script.js"></script>
</head>
<body>

<form name="tableChecker">
<table>
<tr>
  <td><input type="checkbox" name="chkAll"></td>
  <td>Id</td>
  <td>Name</td>
  <td>Email</td>
</tr>
<tr>
  <td><input type="checkbox" name="chkId"></td>
  <td>1</td>
  <td>Moon Knight</td>
  <td>damm15.3.1993@gmail.com</td>
</tr>
<tr>
  <td><input type="checkbox" name="chkId"></td>
  <td>2</td>
  <td>Nhongok16</td>
  <td>aaaa@zing.vn</td>
</tr>
<tr>
  <td><input type="checkbox" name="chkId"></td>
  <td>3</td>
  <td>Apple Piglet</td>
  <td>asdasd@yahoo.com</td>
</tr>
<tr>
  <td><input type="checkbox" name="chkId"></td>
  <td>4</td>
  <td>Noone live forever</td>
  <td>Noone@yahoo.com</td>
</tr>
<tr>
  <td><input type="checkbox" name="chkId"></td>
  <td>5</td>
  <td>Wiliam Gozilla</td>
  <td>gozillawiliam@yahoo.com</td>
</tr>
<tr>
  <td><input type="checkbox" name="chkId"></td>
  <td>6</td>
  <td>SuperMan</td>
  <td>superman@zmail.com</td>
</tr>
<tr>
  <td><input type="checkbox" name="chkId"></td>
  <td>7</td>
  <td>SpiderMan</td>
  <td>spidey@monster.com</td>
</tr>
</table>
<div id="pagination"></div>
<a href="#" id="checkAll">Check all</a>
<a href="#" id="clearAll">Clear all</a>
<p>Copyright 2011 by MoOnKNIght</p>
</form>

</body>
</html>

This is script.js

/*  Variables */
var tableListed, chkAllRadio, chkIdRadio, checkAllButton, clearAllButton;

window.onload = initAll;
	function initAll() {
	tableListed = document.tableChecker;
	chkAllRadio = tableListed.chkAll;
	chkIdRadio = tableListed.chkId;
	checkAllButton = document.getElementById("checkAll");
	clearAllButton = document.getElementById("clearAll");
	
	loadListedTable();
}

function loadListedTable() {
	chkAllRadio.onchange = function() { doCheckAll(this.checked); }	
	chkAllStats();
	checkAllButton.onclick = function() { doCheckAll(true); }
	clearAllButton.onclick = function() { doCheckAll(false); }
}

function chkAllStats() {
	for (var i=0; i<chkIdRadio.length; i++) {
		chkIdRadio[i].onchange = function() { 
				if (isAllChecked()){
					chkAllRadio.checked = true;
				} else {
					chkAllRadio.checked = false;
				}
			}
	}
}

function isAllChecked() {
	var isChecked = true;
	for (var i=0; i<chkIdRadio.length; i++) {
		if (chkIdRadio[i].checked == false){
			isChecked = false;
		}
	}
	return isChecked;
}

function doCheckAll(stats){
	for (var i=0; i<chkIdRadio.length; i++) {
		chkIdRadio[i].checked = stats;
	}
	chkAllRadio.checked = stats;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.