Form Fields: Check Boxes

  • Checkbox name, id, and value:

    When you set up a check box using Expression Web you are allowed to specify a name and a value.  You will probably want to edit the html code to replace the name property with an id property because you will find id to be more useful.

    As noted, Expression Web allows you to specify a value for a checkbox. In this program, although the associated label gives a description of the option as well as its price, the example sets the value property to the price and omits the description. This allows the value of the checkbox to be read and used in calculations.

    Reading the value of a checkbox is easier than reading the value of a label because a checkbox actually has a value property. Here is an example:

    total = total + +document.getElementById("chkBlock").value;
    Why is there a + in front of the last portion?

    Similarly, you can set a checkbox value, although you will seldom have a reason to do so.  Here is an example:
    document.getElementById("chkBlock").value = 54;
  • Checkbox checked?

    You will commonly need to check to see if a checkbox is checked.  Here is one way of doing so:
    if (document.getElementById("chkBlock").checked == true)
  • Checkbox label:
  • You will generally associate a label with each checkbox. For example, you could provide a label like "SIRIUS Satellite Radio ($195)" using the code below:

    <input id="chkRadio" type="checkbox" value="195">
    <label for="chkRadio">SIRIUS Satellite Radio ($195)</label> 
    Notice that the label contains a "for" property.  This is used to "bind" the label to the checkbox so that the user can click either the checkbox or the label to change the checked state of the checkbox.
  • Link