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?
 
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
0
 
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
0
 
nabsolCommented:
Hi

What trouble you are facing?

Nab
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
0
 
mvan01Commented:
@Nab,  Hi, and congratulations!  (on JavaScript Master Level: 56040 Expert Points)  Nice job, especially in less than a month!

Peace and joy.  mvan
0
 
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
0
 
mvan01Commented:
Hi daimo1,  Maybe we crossed posts.  See both of my posts, to get the text and graphics right.  Peace and joy.  mvan
0
 
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";

0
 
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";
0
 
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
0
 
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
0
 
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.