Multiple checkboxes

Use multiple checkboxes to offer the user a number of options, allowing the user to select more than one option.

Suitable for use in similar situations to the multi select panel, this method is best for a smaller list of choices.

This is actually a construction of several elements covered elsewhere individually.

To comply with accessibility guidelines, each field must be explicitly and uniquely identified and labeled, and to work with the template style sheets, some spans and classes must be added.

<div class="array">
<span class="question">This is a checkbox array.</span>
<fieldset class="answer">
  <legend>A checkbox array:</legend>
  <label for="q9a"><input type="checkbox" name="q9" id="q9a" value="Option 1" />Option 1</label>
  <label for="q9b"><input type="checkbox" name="q9" id="q9b" value="Option 2" />Option 2</label>
  <label for="q9c"><input type="checkbox" name="q9" id="q9c" value="Option 3" />Option 3</label>
  <label for="q9d"><input type="checkbox" name="q9" id="q9d" value="Option 4" />Option 4</label>
  <label for="q9e"><input type="checkbox" name="q9" id="q9e" value="Option 5" />Option 5</label>
</fieldset>
</div>

To enable validation for this type of field you need to add the required class to the enclosing div and a span of class required-flag to the question span. Validation will insist that at least one checkbox is selected.

<div class="array" class="required">
<span class="question">This is a checkbox array. <span class="required-flag">(required)</span></span>
<fieldset class="answer">
  <legend>A checkbox array:</legend>
  <label for="q9a"><input type="checkbox" name="q9" id="q9a" value="Option 1" />Option 1</label>
  <label for="q9b"><input type="checkbox" name="q9" id="q9b" value="Option 2" />Option 2</label>
  <label for="q9c"><input type="checkbox" name="q9" id="q9c" value="Option 3" />Option 3</label>
  <label for="q9d"><input type="checkbox" name="q9" id="q9d" value="Option 4" />Option 4</label>
  <label for="q9e"><input type="checkbox" name="q9" id="q9e" value="Option 5" />Option 5</label>
</fieldset>
</div>