CheckboxGroup

A control intended for creating groups of checkboxes.

CheckboxGroup control

Adding CheckboxGroup

You can easily add a Checkbox control during initialization of a form:

var form = new dhx.Form("form_container", { 
    rows: [
        {
            id: "checkboxGroup",
            type: "checkboxGroup",
            name: "checkboxGroup",
            required: true,
            label: "Checkbox Group",
            labelWidth: 140,
            labelPosition: "left",
            helpMessage: "Help information",
            padding: "50px",
            value: {
                first: true,
            },
            options: {
                padding: "50px",
                rows: [
                    {
                        id: "first",
                        type: "checkbox",
                        text: "Select 1",
                    },
                    {
                        id: "second",
                        type: "checkbox",
                        text: "Select 2",
                        checked: true
                    }
                ]
            }
        }
     ]
});

Attributes

You can provide the following attributes in the configuration object of a CheckboxGroup:

type	(string) the type of a control, set it to "checkboxGroup"
name	(string) the name of a control
id	(string) the id of a control, auto-generated if not set
options	(object) an object with options of a CheckboxGroup. The object can contain the following attributes: width - (string\|number\|"content") the width of a CheckboxGroup height - (string\|number\|"content") the height of a CheckboxGroup padding - (string\|number) sets padding between a cell and a border of a CheckboxGroup css - (string) adds style classes to a CheckboxGroup rows - (array) arranges checkboxes inside the CheckboxGroup control vertically cols - (array) arranges checkboxes inside the CheckboxGroup control horizontally
value	(object) the initial value of a CheckboxGroup. The value contain a set of key:value pairs where key is the id of a checkbox and value defines the initial state of the checkbox. The option has a higher priority than the checked attribute of a checkbox.
width	(string\|number\|"content") the width of a control
height	(string\|number\|"content") the height of a control
css	(string) adds style classes to a control
disabled	(boolean) defines whether a control is enabled (false) or disabled (true)
hidden	(boolean) defines whether a CheckboxGroup is hidden
required	(boolean) defines whether a control is required
padding	(string\|number) sets padding between a cell and a border of a CheckboxGroup control
label	(string) specifies a label for a control
hiddenLabel	(boolean) invisible label that will be used to identify the input on the server side
labelPosition	(string) defines the position of a label: "left"\|"top"
labelWidth	(string\|number) sets the width of the label of a control
helpMessage	(string) adds a help message to a control
preMessage	(string) a message that contains instructions for interacting with the control
successMessage	(string) a message that appears in case of successful validation of the control value
errorMessage	(string) a message that appears in case of error during validation of the control value

Attributes of Checkbox

You can provide the following attributes in the configuration object of a checkbox:

type	(string) the type of a control, set it to "checkbox"
id	(string) the id of a control, auto-generated if not set
value	(string) the value of a checkbox
checked	(boolean) defines the initial state of a checkbox
text	(string) the text label of a checkbox
width	(string\|number\|"content") the width of a checkbox
height	(string\|number\|"content") the height of a checkbox
padding	(string\|number) sets padding between a cell and a border of a checkbox
css	(string) adds style classes to a a checkbox
hidden	(boolean) defines whether a checkbox is hidden

Working with CheckboxGroup

You can manipulate a CheckboxGroup control by using methods (or events) of the object returned by the getItem() method.

For example, you can hide a control on a page:

var value = form.getItem("CheckboxGroup").hide();

List of the control methods:

clear	clears a value of a CheckboxGroup control
clearValidate	clears validation of a CheckboxGroup control
disable	disables a CheckboxGroup control on a page
enable	enables a disabled CheckboxGroup control
focus	sets focus to the checkbox of the Checkbox control by its id
getProperties	returns an object with the available configuration attributes of the control
getValue	returns the current value/state of a checkbox(s)
hide	hides a CheckboxGroup control
isChecked	checks whether a checkbox of the CheckboxGroup control is checked
isDisabled	checks whether a CheckboxGroup control is disabled
isVisible	checks whether a CheckboxGroup control is visible on the page
setProperties	allows changing available configuration attributes of the control dynamically
setValue	sets the value for a CheckboxGroup control
show	shows a CheckboxGroup control on the page
validate	validates a CheckboxGroup control

List of the control events:

afterChangeProperties	fires after configuration attributes of the control have been changed dynamically
afterHide	fires after a control is hidden
afterShow	fires after a control is shown
afterValidate	fires after the control value is validated
beforeChangeProperties	fires before configuration attributes of the control are changed dynamically
beforeHide	fires before a control is hidden
beforeShow	fires before a control is shown
beforeValidate	fires before the control value is validated
change	fires on changing the value of a control