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

Recommended Answers

All 2 Replies

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.