Focal Point
[SOLVED] Javascript help needed to control Checkboxes

This topic can be found at:
http://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/7611069903

December 09, 2008, 12:01 PM
mark66
[SOLVED] Javascript help needed to control Checkboxes
Hi all,

I have two checkboxes on my form, checkbox_A and checkbox_B. I want checkbox_A to act independantly, but if checkbox_B is checked I want checkbox_A to be checked too. Likewise if checkbox_B is unchecked, I want checkbox_A to become unchecked.

EDIT...sorry last sentance should read: Likewise if checkbox_A is unchecked, I want checkbox_B to become unchecked. Basically B cannot be on without A!


I am afraid I have no Javascript experience at all and have spent the last few hours trawling through forum posts and looking at the couple of existing Javascript routines we use here.

So far I have found how to call the Javascript, by using a 'onclick = control_cb(this)>' on my checkbox_B:

I then started with the following simple JS function which simply checked the other checkbox:

function control_cb(ctrl) {
document.getElementById("checkbox_a").checked = true;
}

I then tried to use similar logic to create an if statement but this is where things stop working:

function despatch_detail_cb(checked) {
if(document.getElementById("checkbox_b").checked == true)
{
document.getElementById("checkbox_a").checked = true;
}
else
{
document.getElementById("checkbox_a").checked = false;
}
}

Hopefully this isn't too far from what is required, but as already said I have NO Javascript expereince so please be kind Smiler

Many thanks

Mark

This message has been edited. Last edited by: Kerry,


WebFocus 765. iSeries v5r4
December 09, 2008, 12:39 PM
jbanas6
i am assuming you have a html form. There is actually two different ways you can perform this check depending upon when you want to perform the check: You can do a validate with the submit button and/or perform an onclick="function name" shown below.


  
<INPUT TYPE="checkbox" NAME="b" VALUE="1" CHECKED onClick="clickFunction"> 

or you could do the following:

function() {
if(document.myform.boxb.checked == true)
{ document.myform.boxa.checked = true;}
else
{ document.myform.boxa.checked = false;}
}



WF 7.6.10 /IIS 6/ JBoss Enterprise 4.3
Windows XP SP 2/Windows 2003 Server
MVS 7.3.3
December 09, 2008, 12:48 PM
Francis Mariani
Mark, here's a simple HTML page that I think has the behaviour you're looking for:

<html>
<head>
<script type="text/javascript">
function SetCheckboxes()
{
if (document.forms[0].checkbox_B.checked == true)
  {
  document.forms[0].checkbox_A.checked = true;
  }
else
  {
  document.forms[0].checkbox_A.checked = false;
  }
}
</script>

<style type='text/css'>
</style>

</head>

<body>

<form method=post action="">
<input type="checkbox" name="checkbox_A">Checkbox A
<br>
<input type="checkbox" name="checkbox_B" onClick="SetCheckboxes();">Checkbox B
</form>

</body>
</html>

Like jbanas6 said.

This message has been edited. Last edited by: Francis Mariani,


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
December 09, 2008, 01:12 PM
dhagen
That was a good attempt for someone that does not know JS. What was the passed 'checked' argument suppose to be? For future reference, you have a bit of redundancy in your code. It can be simplified as follows:

document.getElementById('checkbox_a').checked = document.getElementById('checkbox_b').checked ? true : false;  



"There is no limit to what you can achieve ... if you don’t care who gets the credit." Roger Abbott
December 09, 2008, 01:24 PM
Francis Mariani
Harder to read, but much nicer JS, dhagen.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
December 10, 2008, 08:51 AM
PBrightwell
If the two check boxes are supposed to be the same, why not simplify both your screen and your program and use one check box?


Pat
WF 7.6.8, AIX, AS400, NT
AS400 FOCUS, AIX FOCUS,
Oracle, DB2, JDE, Lotus Notes
December 10, 2008, 08:56 AM
mark66
Hi,

Many thanks for all your suggestions; it does look like I was pretty close which I am pleased about, just a case of swapping the double quotes for single quotes.

Francis thanks for providing a complete solution, it was very useful to me. I hadn't realised I could actually code the Javascript within the HTML! All our examples are held on the server (because they are used by multiple screens) whereas my requirement was specific to this screen only, so much better!

Dhagen, I wasn't sure about my 'checked' argument, every example I was looking at seemed to use something - I have now removed. Thanks also for you neat solution!

Cheers

Mark


WebFocus 765. iSeries v5r4
December 10, 2008, 09:10 AM
mark66
quote:
Originally posted by PBrightwell:
If the two check boxes are supposed to be the same, why not simplify both your screen and your program and use one check box?
The first checkbox allows the user a chance to search for certain conditions (orders that have not yet been shipped). The 2nd checkbox offers further functionality, but related to these conditions (of those orders not shipped what are awaiting stock). I didn't want the user to think they can use this 2nd function alone, as they must be used together. I could have coded this behind the scenes, but I wanted to make the screen clearer for the user - well that is the idea!


WebFocus 765. iSeries v5r4