TComponents. CheckboxGroup_A

new CheckboxGroup_A(parent, props)

Checkbox group component that allows multiple selections. Each checkbox can be seperately checked or unchecked. This class focuses on the specific properties of the Checkbox group component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:
NameTypeDescription
parentHTMLElement

HTML element that is going to be the parent of the component

propsTComponents.CheckboxGroupProps

Properties of the checkbox group component.

Source
Example
const checkboxGroup = new TComponents.CheckboxGroup_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`
});

await checkboxGroup.render();

Extends

Members

checkedIndexes :Array.<number>

Sets the selected indexes.

Type:
  • Array.<number>
Source
Example
const checkboxGroup = new TComponents.CheckboxGroup_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`
});

await checkboxGroup.render();
// Set the checked indexes
checkboxGroup.checkedIndexes = [0, 1];

color :string

Sets the checkboxgroup's text color

Type:
  • string
Source
Example
const checkboxGroup = new TComponents.CheckboxGroup_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`
});

await checkboxGroup.render();

checkboxGroup.color = '#ff0000'; // Sets the text color to red

onChange :function

Sets the onChange event handler for the checkbox group component. The handler can either be a string representing a function to be executed or a function itself.

  1. If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the checkbox group object.
  2. If you are using string assignment to define code execution, the string should contain only the body of the code (executable statements), not a complete function declaration. Therefore, including function keywords like function or async function is incorrect.
  • Correct (Statements Only): xx.onChange = "console.log('Action done.');"
  • Incorrect (Function Declaration): xx.onChange = "function() { console.log('Action done.'); }"
Type:
  • function
Source
Examples
const checkboxGroup = new TComponents.CheckboxGroup_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`
});

await checkboxGroup.render();

// example 1.
checkboxGroup.onChange = async function() {
  console.log('Checkbox group changed.', this.color);
};
// example 2.
checkboxGroup.onChange = "console.log('Checkbox group changed.', this.color);";
// example 3.
// Note that the `this` context will not refer to the checkbox group object
checkboxGroup.onChange = () => {
  console.log('Checkbox group changed: ', checkboxGroup.color);
};

optionItems :string

Sets the option items from a formatted string.

Type:
  • string
Source
Example
const checkboxGroup = new TComponents.CheckboxGroup_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`
});

await checkboxGroup.render();
// Set the option items using a formatted string
checkboxGroup.optionItems = `text4|value4;\ntext5|value5;\ntext6|value6`;

selectedIndexes :Array.<number>

Sets the selected indexes. (Alias for checkedIndexes)

Type:
  • Array.<number>
Source
Example
const checkboxGroup = new TComponents.CheckboxGroup_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`
});

await checkboxGroup.render();
// Set the selected indexes
checkboxGroup.selectedIndexes = [0, 1];

selectedIndexs :Array.<number>

Sets the selected indexes. (Alias for checkedIndexes)

Type:
  • Array.<number>
Deprecated
Source
Example
const checkboxGroup = new TComponents.CheckboxGroup_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`
});

await checkboxGroup.render();
// Set the selected indexes
checkboxGroup.selectedIndexs = [0, 1];

Methods

(protected) afterRenderOnce() → {void}

there are something need to do after render once

Overrides
Source
Returns:
Type: 
void

(protected) defaultProps() → {TComponents.CheckboxGroupProps}

Returns the default values of class properties (excluding parent properties).

Overrides
Source
Returns:

The default properties of the checkbox group component.

Type: 
TComponents.CheckboxGroupProps

mapComponents() → {object}

Returns an object containing the components mapped to their identifiers. As one of the methods of component lifecycle, we do not recommend that users call this function manually.

Overrides
Source
Returns:

An object mapping identifiers to components.

Type: 
object

markup() → {string}

Returns the HTML markup for the component.

Overrides
Source
Returns:

The HTML markup for the component.

Type: 
string

(async) onInit() → {Promise.<void>}

Initializes the component and sets up click event handling.

Overrides
Source
Throws:

If an error occurs during initialization.

Type
Error
Returns:

A promise that resolves when the initialization is complete.

Type: 
Promise.<void>

(async) onRender() → {Promise.<void>}

Renders the component on the screen and applies the necessary styles and event listeners.

Overrides
Source
Throws:

If an error occurs during rendering.

Type
Error
Returns:

A promise that resolves when the rendering is complete.

Type: 
Promise.<void>

(static) loadCssClassFromString() → {void}

Loads the CSS styles for the CheckboxGroup_A component.

Source
Returns:
Type: 
void
Example
TComponents.CheckboxGroup_A.loadCssClassFromString(`
  .tc-checkbox-group-a {
    height: inherit;
  }`
);