Checkbox HTML Forms

Is current?: 
Yes

The check box template checkbox.htm is a type of HTML form.  

Lines 27-31 display instructions. In this template, a question is followed by a number of options.  Each option is placed next to a square check box button that can be selected by clicking on it.  Unlike the dropdown, this format cannot accommodate a large number of options compactly, and it is unusual to use this format for more then 10 options. Unlike the radio button, multiple options can be selected.  

A single check box item is shown below, enclosed within a table.

<table>

  <tr>

    <td>I am satisfied with Charlottesville's selection of: (check all that apply)<br/>      

      <span class="checkboxtext">

        &nbsp;&nbsp;<input type="checkbox" value="1" name="cbitem1a" /> Farmer's markets<br/>

        &nbsp;&nbsp;<input type="checkbox" value="1" name="cbitem1b" /> Parking spaces<br/>

        &nbsp;&nbsp;<input type="checkbox" value="1" name="cbitem1c" /> Chinese take-outs<br/>

       &nbsp;&nbsp;<input type="checkbox" value="1" name="cbitem1d" /> Microbrews<br/>

       &nbsp;&nbsp;<input type="checkbox" value="1" name="cbitem1e" /> Live music events<br/>

       &nbsp;&nbsp;<input type="checkbox" value="1" name="cbitem1f" /> None of the above<br/>

      </span>

    </td>

  </tr>

</table> <br />

This table has one row with one data cell column. The question is followed by <br/> so that the checkboxes appear below the question. The span tag encloses all the options, one per line. The <br/> tag creates a line break so that each option is on a separate line. Each line has two leading blank spaces, &nbsp;&nbsp; , that provide separation from the check box. In the input tag, type="checkbox" specifies that this is a check box.

Each of the 6 options in this item uses distinct names, cbitem1a … cbitem1f.   Unlike web pages in many sites where a set of checkboxes use the same name, in this template, each checkbox in a question has a unique name.  The default value for each check box is set to 1.  Eventually, data are saved so that checked boxes have a value of either 1 (checked) or  0 (unchecked).  Even though this is just one item, the data are saved as 6 distinct binary variables. To make this happen, the fake button approach described in dropdown-nag is used to set the unchecked boxes to 0 prior to form submission.  How do we set unchecked boxes to zero? The onclick event of the fake button triggers the cleanupcheckboxes()function.  This examines all the checkboxes within a page, and for those that are unchecked, the values are set to zero. The Javascript code is listed below and typically does not need to be modified.

<script type="text/javascript">

    function cleanupcheckboxes() {

      document.getElementById("pagecontent").style.display="none"; // hide content

      for (var i = 0; i < document.form1.elements.length; i++ ) {

        if (document.form1.elements[i].type == 'checkbox') {

          if (!document.form1.elements[i].checked) {

               document.form1.elements[i].value="0";    // unchecked boxes are set to 0

               document.form1.elements[i].checked=true; // all boxes are checked for saving

              }

           }

        }

       return(true);

    }

</script>

Files: