Checkboxes have one main property of interest: checked.

If you have a form named the_form and a checkbox named the_checkbox you can see if the checkbox has been checked like this:

var is_checked = window.document.the_form.the_checkbox.checked;
if (is_checked == true)
{
  alert("Yup, it's checked!");
} else {
  alert("Nope, it's not checked.");
}

As you can see, if a checkbox is checked, the checked property will be true. true is a built-in JavaScript datatype, so you don't have to put it in quotes when checking it. If the checkbox is not checked, the checked property will be false (also a built-in datatype).

Just like you can read the checked property, you can set the checked property. Here's an example of checking and setting the checked property of a checkbox:

Here's the code for the above:

<form name="form_1">
<input type="checkbox" name="check_1">Checkbox 1
</form>

<a href="#" onClick="window.document.form_1.check_1.checked=true; 
return false;">Click to check Checkbox 1</a>

<a href="#" onClick="window.document.form_1.check_1.checked=false; 
return false;">Click to uncheck Checkbox 1</a>

<a href="#" onClick="alert(window.document.form_1.check_1.checked); 
return false;">Click to see the value of Checkbox 1</a>

Notice that I'm sticking the return false in the href. It stops the page from bouncing around when you click on a link.

Checkboxes have one interesting event handler: onClick. When someone clicks on a checkbox, the onClick event handler goes into action. Here's an example of it in use.

This example introduces a few new things. First, there's form that introduces the onClick checkbox handler:

<form name="form_2">
<input type="checkbox" name ="check_1" 
onClick="switchLight();">The Light Switch

</form>

When someone clicks on the checkbox, the onClick handler gets triggered and executes the switchLight() function. Here's the switchLight() function (it's in the header of this page):

function switchLight()
{
  var the_box = window.document.form_2.check_1;
  var the_switch = "";
  if (the_box.checked == false) {
    alert("Hey! Turn that back on!");      
    document.bgColor='black';
  } else {
    alert("Thanks!");
    document.bgColor='white';
  }
}

The interesting thing here is the first line:

var the_box = window.document.form_2.check_1;

That's most of what you have to know about checkboxes. Now let's learn about radio buttons.