CheckboxGroupView
Description
The CheckboxGroup view displays a group of checkboxes, allowing you to populate a set of checkboxes with a search. You can also use this view like a standard HTML checkbox group.
Documentation
Library path
splunkjs/mvc/checkboxgroupview
Properties
Name | Default value | Description |
id | | Required. The unique ID for this control. |
choices | [] | A static dictionary of options for the checkbox group. Must be set in JavaScript. If bound to a managerid, the static choices specified here are prepended to the dynamic choices from the search. |
default | | The value of the options that are selected by default. If setting this in a template tag, use a comma-separated list. If setting this in JavaScript, use an array. |
disabled | false | Indicates whether to disable the view. |
labelField | "" | The text or search field to use as the labels for the checkboxes in this group. If labelField is not defined, the valueField is used as the label. |
managerid | null | The ID of the search manager to bind this control to. |
value | | A comma-separated list of values that are currently selected. |
valueField | "" | The value, or search field to provide the value, for the checkboxes in this group. |
Methods
Name | Description |
render | Draws the control to the screen. Called only when you create the control manually in JavaScript. |
val | Returns an array of values for the checked items if passed no parameters. Sets the checked items if passed an array of values. |
Events
Name | Description |
change | Fired when the value of the view changes. |
Example (Django tag)
{% checkboxgroup id="example-checkboxgroup" default="One, Three" %}
Example (JavaScript)
<script>
var deps = [
"splunkjs/ready!",
"splunkjs/mvc/checkboxgroupview"
];
require(deps, function(mvc) {
var CheckboxGroupView = require("splunkjs/mvc/checkboxgroupview");
// Instantiate components
new CheckboxGroupView({
id: "example-checkboxgroup",
default: "One, Three",
el: $("#mycheckboxgroupview")
}).render();
// Define choices
var choices = [
{label: "One", value: "One"},
{label:" Two", value: "Two"},
{label:" Three", value: "Three"}];
// Assign choices to the checkbox group
splunkjs.mvc.Components.getInstance("example-checkboxgroup").settings.set("choices", choices);
});
</script>
Code examples