Regarding Check Boxes Toggle

Question

raghavendra83 0 Newbie Poster

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

html-css javascript

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

Dani AI

Generated 9 Months Ago

Given the thread, the client OS (Linux vs Windows) on the server host is not relevant to how the browser runs JavaScript in the workstation. As and observed, differences are almost always down to what the server actually sends to the browser (different HTML, missing script files, or different headers). 's point about differing DOM models is relevant historically, but the immediate focus should be on server-side mismatches (file-name case, missing includes, wrong paths, CSP/content-type headers).

Recommended quick checks to isolate the problem:

Fetch the raw HTML produced by both servers and compare to see any JSP output differences (IDs, script tags, etc.).

curl -s 'http://windows-server/path/page' > win.html
curl -s 'http://linux-server/path/page' > linux.html
diff -u win.html linux.html

Use the browser DevTools Network tab to confirm every .js referenced returns 200 and that no CSP or MIME errors appear. In the Console, evaluate whether the toggle function exists and whether the expected container/id is present (for example, check document.getElementById('theId')).

A small, modern JS approach (different from the snippets already posted) that toggles all checkboxes when a button is clicked:

function toggleAllCheckboxes() {
  var boxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].checked = !boxes[i].checked;
  }
}
document.getElementById('toggleBtn').addEventListener('click', toggleAllCheckboxes);

Notes and likely culprits to inspect next: case-sensitive filenames or paths on the Linux server (Windows ignores case, Linux typically does not), incorrect script src that 404s, JSP producing slightly different markup (missing id), server headers blocking inline scripts. The MDN pages for querySelectorAll and addEventListener are useful references for the snippet above.

All 9 Replies

peter_budo 2,532 Code tags enforcer

17 Years Ago

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

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

17 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

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

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.

Regarding Check Boxes Toggle

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers