Graphical Checkbox - adding a toggle function.

Have the following javascript that enhances all the text boxes on a page to graphical ones. (enhanceCheckboxes).
This works a treat.  Now want to be able to toggle the checkboxes to 'Check all' or 'Uncheck all' or have a certain ones checked or unchecked.  Have been able to do this without the enhanced checkboxes (checkAll, CheckDefault) but am having trouble combining the 'checkAll' and 'CheckDefault' with 'enhanceCheckboxes'.  Any ideas?

Thanks
D

_______________________________________
function enhanceCheckboxes() {

// finds every checkbox on the page
// and converts it to a graphical version
 
  // find all input controls:
  var els=document.getElementsByTagName("input");
 
  // for each input element...
  for(var i=0; i < els.length; i++) {

    if (els[i].type=='checkbox') { // its a checkbox
 
      // hide the original checkbox control:  
      els[i].style.display='none';
     
      // create the graphical alternative:
      var img = document.createElement("img");
     
      // initial state of graphical checkbox
      // is the same as the original checkbox:
       
      if (els[i].checked) {
        img.src="images/checked.gif";
        img.title="Checked";
      }
      else {
        img.src="images/unchecked.gif";
        img.title="Unchecked";
      }
     
      // assign our onclick event
      img.onclick= toggleCheckbox;
     
      // insert the new, clickable image into the DOM
      // infront of the original checkbox:
     
      els[i].parentNode.insertBefore(img, els[i]);
     
    }  
  }
}

function toggleCheckbox() {

// graphical checkbox onclick event handler
 
  // toggle the checkbox state:
 
  if (this.title == "Checked") {

    // toggle the image and title:  
    this.src="images/unchecked.gif";
    this.title="Unchecked";
   
    // update the hidden real checkbox to match the state of the graphical
    // version:
    this.nextSibling.checked=false;
   
  }
  else {
 
    // toggle the image and title:  
    this.src="images/checked.gif";
    this.title="Checked";

    // update the hidden real checkbox to match the state of the graphical
    // version:
    this.nextSibling.checked=true;
   
  }
}
____________________________________________________
function checkAll(f,check){

for(i=0;i<f.elements.length;i++)
 if (f.elements[i].type=='checkbox')
  if (f.elements[i].checked!=check) f.elements[i].checked=check
}

Used with two buttons:
<input type="button" value="Check All" onClick="checkAll(this.form,true)">
<input type="button" value="Uncheck All" onClick="checkAll(this.form,false)">
_____________________________________________________
function CheckDefault(){
document.Form1.box1.checked = true;
document.Form1.box2.checked = false;
document.Form1.box3.checked = false;
document.Form1.box4.checked = true;

Used with:
<input type="button" value="Default" onClick="CheckDefault();">

daimo1Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nabsolCommented:
Hi

Try this:

function checkAll(f,check){

for(i=0;i<f.elements.length;i++)
 if (f.elements[i].type=='checkbox')
  if (f.elements[i].checked!=check) f.elements[i].checked=true
}

By Nab
nabsolCommented:
Hi

What trouble you are facing?

Nab
mvan01Commented:
Hi daimo1,

Try this:

____________________________________________________
function checkAll(f,check){

for(i=0;i<f.elements.length;i++)
 if (f.elements[i].type=='checkbox')
  if (f.elements[i].checked!=check) {
    f.elements[i].checked=check;
    f.elements[i].previousSibling.title="Checked";
  }
}

_____________________________________________________
function CheckDefault(){
document.Form1.box1.checked = true;
document.Form1.box1.previousSibling.title="Checked";
document.Form1.box2.checked = false;
document.Form1.box2.previousSibling.title="Unchecked";
document.Form1.box3.checked = false;
document.Form1.box3.previousSibling.title="Unchecked";
document.Form1.box4.checked = true;
document.Form1.box4.previousSibling.title="Checked";
}
_____________________________________________________

Peace and joy.  mvan
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

mvan01Commented:
@Nab,  Hi, and congratulations!  (on JavaScript Master Level: 56040 Expert Points)  Nice job, especially in less than a month!

Peace and joy.  mvan
daimo1Author Commented:
Hi Nab

The code change made no difference.

Without the graphical checkboxes (enhanceCheckboxes) script both the checkAll, CheckDefault scripts work fine.  With the graphical checkboxes, the enhanceCheckboxes script works but the buttons for checkAll, CheckDefault don't make any difference to the graphical checkboxes.  

The graphical checkboxes script converts the normal checkbox code in order to show the graphical checkboxes to the user.  
The checkAll and CheckDefault scripts are working but they don't affect the graphical checkboxes, but as this cannot be seen by the user it makes little.  What I need is enhancement to the checkAll and CheckDefault scripts to allow for the graphical checkboxes.

D
mvan01Commented:
Oh daimo1,

I missed it.  You also need to change the images of those, e.g.:

f.elements[i].previousSibling.src="images/checked.gif";

and

document.Form1.box1.previousSibling.title="Checked";
document.Form1.box1.previousSibling.src="images/checked.gif";
document.Form1.box2.checked = false;
document.Form1.box2.previousSibling.title="Unchecked";
document.Form1.box2.previousSibling.src="images/unchecked.gif";

and similarly for box3 and box4

Peace and joy.  mvan

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mvan01Commented:
Hi daimo1,  Maybe we crossed posts.  See both of my posts, to get the text and graphics right.  Peace and joy.  mvan
daimo1Author Commented:
Thanks mvan

Have got the default bit workng now with a bit of tinkering with your suggestion:
document.Form1.Box1.checked = true;
document.Form1.Box1.previousSibling.src="images/checked.gif";

The toggle code works for selecting all but not deselecting all:

function checkAll(f,check){
for(i=0;i<f.elements.length;i++)
if (f.elements[i].type=='checkbox')
if (f.elements[i].checked!=check) {
f.elements[i].checked=check;
f.elements[i].previousSibling.title="Checked";
f.elements[i].previousSibling.src="images/checked.gif";

daimo1Author Commented:
No problem, just created separte script:

function uncheckAll(f,check){
for(i=0;i<f.elements.length;i++)
if (f.elements[i].type=='checkbox')
if (f.elements[i].checked!=check) {
f.elements[i].checked=check;
f.elements[i].previousSibling.title="Unchecked";
f.elements[i].previousSibling.src="images/unchecked.gif";
mvan01Commented:
Hi daimo1,

I'm glad I could help.  

Just curious, why the 'B' grade?  I can see that my help has you aimed in the right direction, and you're now extending the knowledge, as demonstrated by your previous comment.  Good for you!  That's what Experts Exchange is all about - people helping people increase their knowledge and understanding.

Peace and joy.  mvan
daimo1Author Commented:
My aplogies mvan, I meant to give you an A grade - I usually do when people are prompt, ethusiastic and help me out.  

Hope I didn't offend.
D
mvan01Commented:
Hi D,

Thanks for the explanation.  We're OK - you and I, that is.  (Not me and me, that would be psychological...)

Peace and joy.  mvan
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.