A control intended for creating groups of checkboxes.
Related sample: Checkbox group - DHTMLX Form
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
}
]
}
}
]
});
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:
|
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 |
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 |
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();
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 |
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 |