Using Check Boxes | Inside JavaScript

It's fairly easy to handle check boxes in your code. Here's an example that displays a number of check boxes and uses the ONCLICK attribute to display a message when you click a check box, indicating which check box you clicked:

(Listing 12-12.html on the web site)

 <HTML>      <HEAD>          <TITLE>Using Check Boxes</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function check1Clicked()   {   document.form1.text1.value = "You clicked check box 1."   }   function check2Clicked()   {   document.form1.text1.value = "You clicked check box 2."   }   function check3Clicked()   {   document.form1.text1.value = "You clicked check box 3."   }   function check4Clicked()   {   document.form1.text1.value = "You clicked check box 4."   }   function check5Clicked() {   document.form1.text1.value = "You clicked check box 5."   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using Check Boxes</H1>          <FORM NAME="form1">  <TABLE BORDER BGCOLOR = CYAN WIDTH = 200>   <TR><TD><INPUT TYPE = "CHECKBOX" NAME = "check1" ONCLICK = "check1Clicked(  )">Check 1</TD></TR>   <TR><TD><INPUT TYPE = "CHECKBOX" NAME = "check2" ONCLICK = "check2Clicked(  )">Check 2</TD></TR>   <TR><TD><INPUT TYPE = "CHECKBOX" NAME = "check3" ONCLICK = "check3Clicked(  )">Check 3</TD></TR>   <TR><TD><INPUT TYPE = "CHECKBOX" NAME = "check4" ONCLICK = "check4Clicked(  )">Check 4</TD></TR>   <TR><TD><INPUT TYPE = "CHECKBOX" NAME = "check5" ONCLICK = "check5Clicked(  )">Check 5</TD></TR>   </TABLE>  <BR>              <BR>              <INPUT TYPE="TEXT" NAME="text1" SIZE="30">           </FORM>      </BODY>  </HTML>

You can see how this works in Figure 12.6, where I've clicked a check box.

Figure 12.6. Handling check box clicks.

graphics/12fig06.gif

However, this code makes no distinction between check boxes that are selected (displaying a check mark) and those that don't. You can use the checked property to determine whether a check box is checked. In fact, we've already seen an example that does so in Chapter 7, "Using window and frame Properties," (Listing 07-06.html on the web site) that let the user customize the Netscape Navigator by selecting what elements should be visible using check boxes. To write this example, we used the check boxes' ONCLICK attribute and checked property:

 <HTML>      <HEAD>          <TITLE>Toggling Navigator Bars</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function handleBar()   {   netscape.security.PrivilegeManager.enablePrivilege ("UniversalBrowserWrite")   window.locationbar.visible = document.form1.check01.checked   window.menubar.visible = document.form1.check02.checked   window.personalbar.visible = document.form1.check03.checked   window.scrollbars.visible = document.form1.check04.checked   window.statusbar.visible = document.form1.check05.checked   window.toolbar.visible = document.form1.check06.checked   netscape.security.PrivilegeManager.revertPrivilege ("UniversalBrowserWrite")   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Toggling Navigator Bars</H1>  <FORM NAME="form1">   <INPUT TYPE="CHECKBOX" ID="check01" ONCLICK="handleBar()" CHECKED>Location Bar   <BR>   <INPUT TYPE="CHECKBOX" ID="check02" ONCLICK="handleBar()" CHECKED>Menu Bar   <BR>   <INPUT TYPE="CHECKBOX" ID="check03" ONCLICK="handleBar()" CHECKED>Personal Bar   <BR>   <INPUT TYPE="CHECKBOX" ID="check04" ONCLICK="handleBar()" CHECKED>Scrollbars   <BR>   <INPUT TYPE="CHECKBOX" ID="check05" ONCLICK="handleBar()" CHECKED>Status Bar   <BR>   <INPUT TYPE="CHECKBOX" ID="check05" ONCLICK="handleBar()" CHECKED>Tool Bar   </FORM>  </BODY>  </HTML>

You can see the results of this code in Chapter 7, in Figures 7.6 and 7.7. Here's another example, which enables the user to select which controls are visible in a web page by clicking a check box to toggle the visibility of two buttons using the style attribute's visibility property and the check boxes' checked property (if you're using Netscape Navigator, you'll need version 6+ here):

(Listing 12-13.html on the web site)

 <HTML>      <HEAD>          <TITLE>Showing and hiding controls</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function checkClicked(check)   {   if(check.checked) {   document.form1.button1.style.visibility= "visible"   document.form1.button2.style.visibility= "visible"   } else {   document.form1.button1.style.visibility= "hidden"   document.form1.button2.style.visibility= "hidden"   }   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Showing and hiding controls</H1>          <FORM NAME="form1">              <INPUT TYPE="BUTTON" VALUE="Check spelling" NAME="button1" STYLE="visibility:  hidden">              <INPUT TYPE="BUTTON" VALUE="Change case" NAME="button2" STYLE="visibility:  hidden">              <BR>              <INPUT TYPE="TEXT" NAME="text1">  <INPUT TYPE = "CHECKBOX" NAME = "check1" ONCLICK = "checkClicked(this)">Show  all options  </FORM>      </BODY>  </HTML>

You can see how this works in Figure 12.7; I've clicked the check box to make the two buttons visible. In this way, you can let the user set options (such as whether additional controls are visible) using check boxes.

Figure 12.7. Toggling button visibility with a check box.

graphics/12fig07.gif

I'll also take another look at check boxes in the next section on radio buttons, when we use check boxes and radio buttons together.