Javascript/checkbox problem

Former Member · ‎10-12-2006

Hi All

I have a Javascript problem in a search application.

On my page I've three checkbox-groups with several cb in each.

cb All

cb 1

cb 2

cb 3

cb 4

cb 5

And to set if the cb should be checked or not, I've two scrpits, one

to check or uncheck cb 1 - 5 if "All" is checked or not, and one to

uncheck "All" if one of cb 1-5 is unchecked. But I can´t get the scripts

to uncheck the cb. It seems as the "oCheckBox.checked = true; " doesn't

work. I've tried with "oCheckBox.clicked()" and it changes the state of

the cb, but then i get an onClick event and ends up with one script called

after the first one is done. In script two the "oAllBox.clicked()" will

then call script one, and the state of the cb would be changed.

The code as follow:

For each cb the setOnClientClick lokks like this.

checkBox.setOnClientClick("javascript:" + strCheckAllJavaScriptName + "();");

checkBox.setOnClientClick("javascript:" + strCheckOtherJavaScriptName + "('"+ strCheckBoxId + "');");

The JavaScripts

StringBuffer buffer = new StringBuffer("");

buffer.append("");

HTMLFragment htmlJavaScript = new HTMLFragment(buffer.toString());
layoutCell.addComponent(htmlJavaScript);

StringBuffer buffer2 = new StringBuffer("");
buffer2.append("");

HTMLFragment htmlJavaScript2 = new HTMLFragment(buffer2.toString());
layoutCell.addComponent(htmlJavaScript2);

And in the browsercode i looks like this:

var oAllBox = document.getElementById('htmlb_269_0_1');
if (oAllBox.checked == true) {
var oCheckBox = document.getElementById('htmlb_269_0_2');
if (oCheckBox.checked == false) {
oCheckBox.checked = true;
}
var oCheckBox = document.getElementById('htmlb_269_0_3');
if (oCheckBox.checked == false) {
oCheckBox.checked = true;
}
var oCheckBox = document.getElementById('htmlb_269_0_4');
if (oCheckBox.checked == false) {
oCheckBox.checked = true;
}
var oCheckBox = document.getElementById('htmlb_269_0_5');
if (oCheckBox.checked == false) {
oCheckBox.checked = true;
}
var oCheckBox = document.getElementById('htmlb_269_0_6');
if (oCheckBox.checked == false) {
oCheckBox.checked = true;
}
} else {
var oCheckBox = document.getElementById('htmlb_269_0_2');
if (oCheckBox.checked == true) {
oCheckBox.checked = false;
}
var oCheckBox = document.getElementById('htmlb_269_0_3');
if (oCheckBox.checked == true) {
oCheckBox.checked = false;
}
var oCheckBox = document.getElementById('htmlb_269_0_4');
if (oCheckBox.checked == true) {
oCheckBox.checked = false;
}
var oCheckBox = document.getElementById('htmlb_269_0_5');
if (oCheckBox.checked == true) {
oCheckBox.checked = false;
}
var oCheckBox = document.getElementById('htmlb_269_0_6');
if (oCheckBox.checked == true) {
oCheckBox.checked = false;
}
}
}

var cbID = strCheckBoxId;
var oCheckBox = document.getElementById(cbID);
if (oCheckBox.checked == false) {
var oAllBox = document.getElementById('htmlb_269_0_1');
if (oAllBox.checked == true) {
oAllBox.checked = false;
}
}
}

Any ideas or suggestion would be appreciated

Best regards

Mikael Lofberg

frederic-pascal_ahring · ‎10-13-2006

Hi, Mikael

I tried to solve your problem - having the 'all'-checkbox - and using the onClick event handler worked perfectly for me (FireFox 1.5 and IE 6.0).

I just tried the pure Javascript, as your Java generation code probably has nothing to do with your problem. I assume you can translate it back to Java by yourself

(by the way, if you happen to use Eclipse, it might be worth the time to take a look at <a href="http://www.eclipse.org/emft/projects/jet/">the Eclipse JET project</a>)

I took the approach to store all IDs belonging to the checkboxes in a JavaScript array and loop over it, which makes both the generated code more readable (and thus debugable) and the final HTML smaller. For using multiple groups of independent checkboxes you have to make some small adjustments, of course.

<!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" lang="en_US" xml:lang="en_US">
<!--
 * Created on 13.10.2006
 * Author: FAhring
-->
<head>
  <title>Checkbox Test</title>

<script language='JavaScript'><!--
// initialize array with checkbox ID names
id_list = new Array('cb_1', 'cb_2', 'cb_3');

// onClick for 'all' checkbox
function onAll() {
	cb_all = document.getElementById('all');
  for (idx in id_list) {
		cb_one = document.getElementById(id_list[idx]);
		cb_one.checked = cb_all.checked;
  }
}

// onClick for any other checkbox
function onOne() {
	all_checked = true;
  for (idx in id_list) {
		cb_one = document.getElementById(id_list[idx]);
		if (!cb_one.checked) {
			all_checked = false;
		}
  }
	cb_all = document.getElementById('all');
  cb_all.checked = all_checked;
}

// set all checkboxes to the value of 'checked'
function setAll(checked) {
  for (idx in id_list) {
		cb_one = document.getElementById(id_list[idx]);
		cb_one.checked = checked;
  }
	cb_all = document.getElementById('all');
	cb_all.checked = checked;
}
//--></script>
</head>
<body>
 
<h2>Javascript Checkbox Tester</h2>
<form>
  <input type="checkbox" id="all" onClick="onAll();" /><label for="all">All</label><br>
  <input type="checkbox" id="cb_1" onClick="onOne();" /><label for="cb_1">CB 1</label><br>
  <input type="checkbox" id="cb_2" onClick="onOne();" /><label for="cb_2">CB 2</label><br>
  <input type="checkbox" id="cb_3" onClick="onOne();" /><label for="cb_3">CB 3</label><br>
  <span onClick="setAll(true);">Check all</span> - <span onClick="setAll(false);">Uncheck all</span><br> 
</form>
 
</body></html>

I hope this helps you.

:Frederic:

Former Member · ‎10-18-2006

Thanks Fredric

Your answer was helpful, but it didn't solve my problem.

The line "oCheckBox.checked = true; " didn't´t change the

state of my checkbox, so I've had to use "oCheckBox.clicked()". To get around the problem with one script calling the other when a click-event occurred on the oAllBox, I've used an hiddden inputfield where the value was set to 0 or 1. So if the value was equal to 0, the code in the script was not executed, other than reseting the value to 1.

But I reward you for the answer, as it got me in to new ways of thinking, and it's a useful script in other applications.

Best regards

Mikael L

frederic-pascal_ahring · ‎10-18-2006

Perhaps I did understand your problem wrong. I thought the main problem was having this all-checkbox functional - so this is what I did (and I even enhanced it a bit). So if your version is not working, why not use my version? Please tell me, is there a specific reason you want to do it the way you tried to do it, or does my version not work for your problem? Which parts of it don't work?

I will try again, but I don't quite understand what the actual problem is now.

I'm also using the construct document.getElementById() and checkboxvar.checked = true, and it did work for me, in Firefox and IE. What Browser do you use?

:Frederic:

Former Member · ‎10-20-2006

This code works for me.

<html>

<body>

function checkAll(what)

{

for (var k=1; k<6; k++)

{

var cb = document.getElementById("cb" + k);

cb.checked = what;

}

function refreshState(cb)

{

if ("all" == cb.id)

{

checkAll(true);

cb.checked = false;

}

else if (!cb.checked)

{

checkAll(false);

}

</script>

<input type="checkbox" onclick="refreshState(this)" id="cb1" />First option<br />

<input type="checkbox" onclick="refreshState(this)" id="cb2" />Second option<br />

<input type="checkbox" onclick="refreshState(this)" id="cb3" />Third option<br />

<input type="checkbox" onclick="refreshState(this)" id="cb4" />Fourth option<br />

<input type="checkbox" onclick="refreshState(this)" id="cb5" />Fifth option<br />

<hr />

<input type="checkbox" onclick="refreshState(this)" id="all" />Check all<br />

</form>

Your browser does not support Javascript or it is disabled.

</noscript>

</body>

</html>