Regarding Check Boxes Toggle

Question

raghavendra83 0 Newbie Poster

15 Years Ago

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 :)

javascript

5 Contributors
9 Replies
113 Views
5 Days Discussion Span
Latest Post 15 Years Ago Latest Post by ~s.o.s~

peter_budo 2,532 Code tags enforcer

15 Years Ago

Move from JSP (Java Server Pages) to JavaScript section...

~s.o.s~ 2,560 Failure as a human

15 Years Ago

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].

~s.o.s~ 2,560 Failure as a human

15 Years Ago

> 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.

Reply to this topic

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.

raghavendra83 0 Newbie Poster · Answer 1 · 2009-02-13T12:39:07+00:00

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.

mschroeder 251 Bestower of Knowledge Team Colleague · Answer 2 · 2009-02-13T23:24:04+00:00

are you trying to toggle every check box on the page on and off? or just one checkbox?

raghavendra83 0 Newbie Poster · Answer 3 · 2009-02-17T11:22:22+00:00

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.

mschroeder 251 Bestower of Knowledge Team Colleague · Answer 4 · 2009-02-17T19:52:28+00:00

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.

almostbob 866 Retired: passive income ROCKS · Answer 5 · 2009-02-17T20:02:32+00:00

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;

~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster · Answer 6 · 2009-02-17T22:03:55+00:00

> 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.