Inside Technique : Custom Checkboxes : Creating Checkboxes

The custom checkbox is created using our newCheckbox() function. This function takes the name of the checkbox, name of the form, a boolean (true or false) setting whether the checkbox is initialized checked or unchecked, and a label to append after the checkbox:

newCheckbox(checkboxName, formName, defaultChecked, stringLabel)

Below we show how this function is used to create the demonstration on the first page:

<!--
   1) Name your form.
   2) Set the onsubmit event to checkImages(this) 
-->
<FORM NAME="demoForm" ONSUBMIT="checkImages(this)">

<!-- 
   3) Call newCheckbox where you want custom checkboxes
-->
<SCRIPT>
<!--
newCheckbox("info","demoForm", false, "Sample 1")
document.write("<BR>")
newCheckbox("cool","demoForm", true, "Sample 2")
//-->
</SCRIPT>
<!--
   4) Provide a version for browsers without scripting
-->
<NOSCRIPT>
  <INPUT TYPE=checkbox NAME=info> Sample 1
  <INPUT TYPE=checkbox NAME=cool> Sample 2
</NOSCRIPT>
<INPUT TYPE="submit" VALUE="Submit Values">
</FORM>

There is a lot happening in the above form. When calling the newCheckbox function you must give it a unique ID. This ID represents the name used when the value is submitted. The form name must match the name of the form that contains the checkbox. We use this value to locate the input field that represents the click-state of the checkbox. The last two arguments were explained above and represent the initial click-state, and the label.

To make this example completely cross-browser, we special-case older scriptable browsers by checking for image collection support. If the image collection is not supported (eg., Internet Explorer 3.0), we output standard checkboxes. For non-scriptable browsers, the NOSCRIPT element contains the standard checkboxes. On the last page you will find the code for the newCheckbox() and support functions and cross-browser scripting notes.

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