TComponents. Checkbox_A

new Checkbox_A(parent, props)

Checkbox component that allows a single selection. Each checkbox can be separately checked or unchecked. This class focuses on the specific properties of the Checkbox 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.CheckboxProps

Properties of the checkbox component.

Source
Example
const checkbox = new TComponents.Checkbox_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Execute'
});

checkbox.render();

Extends

Members

checked :string

Sets the checked state for the checkbox.

Type:
  • string
Source
Example
const checkbox = new TComponents.Checkbox_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Execute'
});

checkbox.render();
// Set the checkbox to checked state
checkbox.checked = true;

color :string

Sets the color of the description label.

Type:
  • string
Source
Example
const checkbox = new TComponents.Checkbox_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Execute'
});
checkbox.render();
// Set the color of the description label
checkbox.color = '#ff0000';

enabled :boolean

Gets the enabled state for the component.

Type:
  • boolean
Overrides
Source
Example
const checkbox = new TComponents.Checkbox_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Execute'
});
checkbox.render();
// Set the checkbox to enabled state
checkbox.enabled = true;

onChange :function

Sets the onChange event handler for the checkbox 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 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 checkbox = new TComponents.Checkbox_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Execute'
});
checkbox.render();
// Example 1: Using a string as the handler:
checkbox.onChange = "console.log(this.checked);"
// Example 2: Using a function as the handler:
checkbox.onChange = function () {
  console.log(this.checked);
};
// Example 3: Using an arrow function as the handler:
// Note that the `this` context will not refer to the checkbox object
checkbox.onChange = () => {
  console.log(checkbox.checked);
};

selectedIndex :number

Sets the check box binding index.

Type:
  • number
Deprecated
  • The interface has been deprecated.
Source
Example
const checkbox = new TComponents.Checkbox_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Execute'
});
checkbox.render();

checkbox.selectedIndex = 0;

text :string

Sets the description text label for the checkbox.

Type:
  • string
Source
Example
const checkbox = new TComponents.Checkbox_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Execute'
});
checkbox.render();
// Set the description text label
checkbox.text = 'Execute Task';

value :string

it is unstable and its use is not recommended, sets the binding value of the checkbox.

Type:
  • string
Source
To Do
  • This is an experimental interface; it is unstable and its use is not recommended.
Example
const checkbox = new TComponents.Checkbox_A(document.body, {
  position: 'absolute',
  zIndex: 1000,
  text: 'Execute'
});
checkbox.render();
// Set the binding value
checkbox.value = 'execute';

Methods

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

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

Overrides
Source
Returns:
  • The default properties of the checkbox component.
Type: 
TComponents.CheckboxProps

markup() → {string}

Returns the HTML markup for the component.

Overrides
Source
Returns:

The HTML markup for the component.

Type: 
string

onInit() → {void}

Initializes the component and sets up click event handling.

Overrides
Source
Returns:
Type: 
void

onRender() → {void}

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

Overrides
Source
Throws:

If an error occurs during rendering, it will throw an Error with a specific error code and message.

Type
Error
Returns:
Type: 
void