New to Kendo UI for jQuery? Start a free 30-day trial

Items

configuration

Array of items to be rendered as checkboxes in the CheckBoxGroup. If the array contains objects, their fields will be used for each checkbox configuration. If the array contains strings, those will be used as both value and label of the respective checkbox.

items

Array

<ul id="checkboxgroup"></ul>

<script>
    $("#checkboxgroup").kendoCheckBoxGroup({
        items: [ "one", "two", "three" ]
    });
</script>

<ul id="checkboxgroup"></ul>

<script>
    $("#checkboxgroup").kendoCheckBoxGroup({
        items: [{
            value: "one",
            label: "Label one"
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>

items.attributes

Object

Collection of key-value pairs that would be used to generate the attributes attached to each k-checkbox-item element.

<ul id="checkboxgroup"></ul>

<script>
    $("#checkboxgroup").kendoCheckBoxGroup({
        items: [{
            value: "one",
            label: "Label one",
            attributes: {
                "data-test": "custom"
            }
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>

items.cssClass

String

Any custom classes that should be attached to the k-checkbox-item element.

<ul id="checkboxgroup"></ul>

<script>
    $("#checkboxgroup").kendoCheckBoxGroup({
        items: [{
            value: "one",
            label: "Label one",
            cssClass: "custom-class"
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>

items.enabled

Boolean

Defines whether the checkbox is enabled or not. By default all checkboxes are enabled.

Default: true

<ul id="checkboxgroup"></ul>

<script>
    $("#checkboxgroup").kendoCheckBoxGroup({
        items: [{
            value: "one",
            label: "Label one",
            enabled: false
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>

items.encoded

Boolean

Determines whether the checkbox label content should be rendered as an HTML string or it should be encoded.

Default: true

<ul id="checkboxgroup"></ul>

<script>
    $("#checkboxgroup").kendoCheckBoxGroup({
        items: [{
            value: "one",
            label: "<strong>Label one</strong>",
            encoded: false
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }],
    });
</script>

items.label

String

Specifies the label content for the checkbox.

<ul id="checkboxgroup"></ul>

<script>
    $("#checkboxgroup").kendoCheckBoxGroup({
        items: [{
            value: "one",
            label: "<strong>Label one</strong>"
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>

items.value

String

Specifies the value for the checkbox.

<ul id="checkboxgroup"></ul>

<script>
    $("#checkboxgroup").kendoCheckBoxGroup({
        items: [{
            value: "one",
            label: "<strong>Label one</strong>"
        },{
            value: "two",
            label: "Label two"
        },{
            value: "three",
            label: "Label three"
        }]
    });
</script>