How to toggle check boxes using JavaScript in Linux?

I was able to do the same in Windows with the below code....

function toggle_checkboxes(id)
{
    if (!document.getElementById){ return; }
    if (!document.getElementsByTagName){ return; }
    var inputs = document.getElementById(id).getElementsByTagName("input");
    for(var x=0; x < inputs.length; x++) {
        if (inputs[x].type == 'checkbox'){
            inputs[x].checked = !inputs[x].checked;
        }
    }
}

The same code is not working when I run it from a Linux machine.
When the button is clicked, nothing is happening :confused:

Please let me know as to how should I go about fixing this problem.
Thanks a lot for your time :)

The browser in use can make a difference, the OS doesn't. Which browser are you using on Linux? If Firefox, try using the Firebug addon which provides Javascript debugging capabilities. For looking at Javascript errors if any, open up the Error Console [Tools -> Error Console].

Hi s.o.s,
Thanks for your reply.
My workstation from which I am testing it is the same for both windows & Linux.
When I run the code installed on a windows machine & access it from my workstation, it works.
But the same code when run from a linux machine & accessed from the same workstation does not work!
I am using Firefox on my workstation. Tried installing the addon u suggested, but could not install it due to some errors.
I also tried opening the same code using Internet Explorer.
Thanks for your time.

> could not install it due to some errors

Upgrade to a newer version of Firefox and then try it; ideally there shouldn't be any problems. What is the error you are getting?

Anyways, like I mentioned in my previous post, take a look at Error Console which is comes pre-installed with Firefox and tell me the error you see there.

BTW, what kind of an application we are talking about here? ASP. NET, Java, PHP? I need more details since this seems to be pretty unusual.

Hi,
Thanks for your replies. I tried the whole day yesterday, but could not get anywhere :( . The same code when run from a linux server it does not work, but when run from windows it works...........
@s.o.s
The error console in firefox does not display any errors.
It is a JSP application & the toggle code is javascript.
@mschroeder
I am trying to toggle all the check boxes in the page.

rag:

This example uses jQuery to check all the checkboxes on page load.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	
	$('input:checkbox').each( function() {
		$(this).attr('checked', true);
	});
});
</script>
</head>
<body>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>

</body>
</html>

if you wanted to have a single checkbox that when checked or unchecked toggled every other checkbox we can easily do that too.
Here is the same example with a new checkbox just for toggling all of the checkboxes and some revised jQuery.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#checkAll').click( function() {
		if( $(this).attr('checked') )
		{
			$('input:checkbox').each( function() {
				$(this).attr('checked', true);
			});
		}
		else
		{
			$('input:checkbox').each( function() {
				$(this).removeAttr('checked');
			});
		}
	});
});
</script>
</head>
<body>
Check All <input name="anything" id="checkAll" type="checkbox" value="1" /><br/><br/><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>
Something <input name="anything" type="checkbox" value="1" /><br/>

</body>
</html>

Its not a very practical form, but the concept should be relatively easy to grasp.

it may be due to the different document models
this script works on linux macs windows in safari ie firefox,
Its not mine,
the differing dom modelsshow in the first few lines of code

(document.getElementById) ? dom = true : dom = false;
function hideIt() {
if (dom) {document.getElementById("layer1").style.visibility='hidden';}
if (document.layers) {document.layers["layer1"].visibility='hide';} }
function showIt() {
if (dom) {document.getElementById("layer1").style.visibility='visible';}
if (document.layers) {document.layers["layer1"].visibility='show';} }
function placeIt() {
if (dom && !document.all) {document.getElementById("layer1").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
if (document.layers) {document.layers["layer1"].top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
if (document.all) {document.all["layer1"].style.top = document.body.scrollTop + (document.body.clientHeight - (document.body.clientHeight-y1));}
window.setTimeout("placeIt()", 10); }
window.onload=placeIt;

> The error console in firefox does not display any errors.

IMO then it can only mean two things:
- Either the Javascript on the entire page is disabled causing the script not to be executed.
- The function is executed but doesn't work as expected due to some reason. Put alerts at the start and end of function and see if it fires off.

This article has been dead for over six months. Start a new discussion instead.