[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 552
  • Last Modified:

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();">

0
daimo1
Asked:
daimo1
  • 6
  • 4
  • 2
1 Solution
 
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
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now