Checkbox element

Introduction(top)

The checkbox element allows you to add a group of checkboxes to your form.

The user can then select none, one or several of these checkboxes. The details of which checkboxes have been chosen are stored in a single field in the database in JSON format.

Settings (top)

Options(top)

Note: The checkboxes are defined in the Sub Elements section of the form.

• Options per row - The number of check boxes to show per row.
• Add - Press this to add in a new checkbox
• Value - The value that is stored in the database if the checkbox is selected
• Label - The label that appears next to the checkbox. Equally this label is shown in the table view rather than the recorded value (which is stored in the database table itself)
• Default - is the option selected as default
• Delete - Press this to delete the checkbox

Note: you can reorder the sub elements by clicking down on the grey bar to the side of the value field and dragging it within the list.

Defaults(top)

• Default Value - If no checkbox selected this value will be stored in the database.
• Default Label - If no checkbox selected this value will be shown in the fabrik table

Add Options (top)

• Enabled - Allow your form's users to add in additional options to your form.
• Only add label - If no selected then the user has to enter both a value and a label for the checkbox option they are adding. If yes selected then only a label field is presented to the user the value of which is then used for the value and label.
• Save new additions - If yes selected then the newly submitted option is stored by the element, meaning subsequent users of the form will be able to select the same value.

Advanced (top)

• Separator - String separator to be used when formatting the data contained within the form email plug-in. Leave blank to default to a new line.

JS code Examples (top)

A checkbox to clear all checkboxes (top)

Say we have four sub elements, with values 1,2,3,4 and when the fourth element is clicked we want to uncheck the other checkboxes. Edit the element, add a new javascript event:

Action: click

Code: