Skip to Content
author's profile photo Former Member
Former Member

Javascript/checkbox problem

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

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

3 Answers

  • Posted on Oct 13, 2006 at 10:40 AM

    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 the" target="_blank">http://www.eclipse.org/emft/projects/jet/">the Eclipse JET project)

    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:

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Oct 18, 2006 at 05:12 AM

    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

    Add a comment
    10|10000 characters needed characters exceeded

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

  • author's profile photo Former Member
    Former Member
    Posted on Oct 20, 2006 at 04:47 PM

    This code works for me.

    <html>

    <body>

    <script language="javascript">

    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>

    <form id="form1">

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

    <noscript>

    Your browser does not support Javascript or it is disabled.

    </noscript>

    </body>

    </html>

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.