Inside Technique : Custom Checkboxes : Code

/* Copyright 1998 insideDHTML.com, LLC. All rights reserved
   For more information, see http://www.insideDHTML.com
   You may reuse this code as long as this notice is not
   removed
*/
function checkImages(f) {
  if (document.images) {
    // Check for custom checkboxes
    for (var i = 0; i < f.length; i++) {
      var el = f.elements[i]
      var img = document.images["img" + el.name]
      // If image, store value
      if (img)
        el.value = (img.src.substring(img.src.lastIndexOf("/")+1)=="checked.gif") ? "on" : "off"
    }
  }
}

function swapCheck(id,formID) {
  var img = document.images["img" + id]
  var inpt = document.forms[formID][id]

  if (img.src.substring(img.src.lastIndexOf("/")+1)=="checked.gif") {
    img.src = "nocheck.gif"
    inpt.value = "off"
  } else {
    img.src = "checked.gif"
    inpt.value = "on"
  }
}

function newCheckbox(id, formID, bDefault, text) {
  var str
  if (document.images) {
    str = "<A BORDER=0 HREF=\"#\" ONCLICK=\"swapCheck('" + id + "','" + formID+"'); return false\">"
    str += "<IMG NAME=\"img" + id + "\" SRC=\"" + ((bDefault) ? "checked.gif" : "nocheck.gif") + "\"></A> " + text
    // In our sample page, we set the TYPE to text to 
    // visibly demonstrate how this works.
    str += " <INPUT TYPE=HIDDEN NAME=\"" + id + "\">"
  } else
    str = "<INPUT TYPE=checkbox NAME=\"" + id + "\"" +  ((bDefault) ? "checked" : "") + ">"
  document.write(str)
}

You can customize the images by created your own checked.gif and unchecked.gif. With a small amount of work, you can change the newCheckbox function to take the names of the two gifs as arguments allowing you to use custom checked and unchecked images for each checkbox.

Cross-browser Notes

This section contains some cross-browser scripting notes. First, the latest browsers attempt to cache form values. This can cause problems where the page loads with the wrong default value. To fix this, you need to reset the default value, or as we do in this example, verify the values before the form is submitted. We do our verification before the form is submitted do to a timing difference between Netscape 3.0 and the latest 4.0 browsers. In Netscape Navigator 3.0, you cannot access the form elements until after the script finishes executing, while in the 4.0 browsers you can access the elements immediately after the element is inserted. For example, assume the following two lines are executed as the page loads

document.write("<FORM NAME=demo><INPUT TYPE=text NAME=test></FORM>")
// Works in 4.0 browsers, fails in 3.0 browsers
document.forms.demo.elements.test.value = "test"

We originally wrote similar code to initially set the state of the corresponding input controls. Since this fails in Netscape 3.0, we instead wrote code that sets the input values using the onsubmit event that occurs before the form is submitted. This also fixes the form caching problem we see in the latest browsers. Form caching is a user feature where form input controls remember the last entered value. For scripted pages, this can cause problems because your initial default value is not guaranteed to be the initial value.

In addition, as explained in this articles introduction, we use document write's to insert the contents. If you want a less generic solution (losing the downlevel support), you can insert the necessary image and form element directly into the page including within tables:

<FORM NAME=demo ONSUBMIT="checkImages(this)">
  <A BORDER=0 HREF="#" ONCLICK="swapCheck('info','demo'); return false">
  <IMG NAME="imginfo" SRC="checked.gif"></A> More Information
  <INPUT TYPE=HIDDEN NAME="info">

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.