| Name | Type | Default |
|---|
|
animationShowDelay
|
number
|
250
|
Sets or gets the delay of the fade animation when the CheckBox is going to be checked.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
animationShowDelay={300}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
animationHideDelay
|
number
|
300
|
Sets or gets the delay of the fade animation when the CheckBox is going to be unchecked.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
animationHideDelay={500} checked={true}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
boxSize
|
number | string
|
"13px"
|
Sets or gets the checkbox's size.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
boxSize={'15px'}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
checked
|
boolean | null
|
false
|
Sets or gets the check state.
Possible Values: (when the hasThreeStates property value is true)
'true'
'false'
'null'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
checked={true}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
disabled
|
boolean
|
false
|
Sets or gets whether the CheckBox is disabled.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
disabled={true}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
enableContainerClick
|
boolean
|
true
|
Sets or gets whether the clicks on the container are handled as clicks on the check box.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
enableContainerClick={false}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
groupName
|
string
|
""
|
Sets or gets the group name. When this property is set, the checkboxes in the same group behave as radio buttons.
|
|
height
|
number | string
|
null
|
Sets or gets the jqxCheckBox's height.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
height={100}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
hasThreeStates
|
boolean
|
false
|
Sets or gets whether the checkbox has 3 states - checked, unchecked and indeterminate.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
hasThreeStates={true}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
locked
|
boolean
|
false
|
Sets or gets whether the checkbox is locked. In this mode the user is not allowed to check/uncheck the checkbox.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
locked={true}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
rtl
|
boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
rtl={true}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
theme
|
string
|
''
|
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
theme={'material'}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
width
|
number | string
|
null
|
Sets or gets the jqxCheckBox's width.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
width={300}>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
|
|
checked
|
Event
|
|
This event is triggered when the checkbox is checked.
Code examples
Bind to the checked event of jqxCheckBox.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox} onChecked={this.onChecked}
>
Check Me Out!
</JqxCheckBox>
);
}
private onChecked(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
change
|
Event
|
|
This is triggered when the checkbox's state changes from one state to another.
Code examples
Bind to the change event of jqxCheckBox.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public render() {
return (
<JqxCheckBox ref={this.myCheckBox} onChange={this.onChange}
>
Check Me Out!
</JqxCheckBox>
);
}
private onChange(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
indeterminate
|
Event
|
|
This event is triggered when the checkbox's checked property is going to be null.
Code examples
Bind to the indeterminate event of jqxCheckBox.
|
|
unchecked
|
Event
|
|
This event is triggered when the checkbox is unchecked.
Code examples
Bind to the unchecked event of jqxCheckBox.
|
|
|
| Name | Arguments | Return Type |
|---|
|
check
|
None
|
|
Checks the checkbox.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public componentDidMount(): void {
this.myCheckBox.current!.check();
}
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
disable
|
None
|
|
Disables the checkbox.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public componentDidMount(): void {
this.myCheckBox.current!.disable();
}
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
destroy
|
None
|
|
Destroys the widget.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public componentDidMount(): void {
this.myCheckBox.current!.destroy();
}
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
enable
|
None
|
|
|
|
|
focus
|
None
|
|
Focuses the widget.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public componentDidMount(): void {
this.myCheckBox.current!.focus();
}
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
indeterminate
|
None
|
|
Sets the indeterminate state(checked property value is going to be null after calling this method).
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public componentDidMount(): void {
this.myCheckBox.current!.indeterminate();
}
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
render
|
None
|
|
Renders the widget.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public componentDidMount(): void {
this.myCheckBox.current!.render();
}
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
toggle
|
None
|
|
Toggles the check state. This method is automatically called when the user clicks the checkbox.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public componentDidMount(): void {
this.myCheckBox.current!.toggle();
}
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
|
uncheck
|
None
|
|
|
|
|
val
|
value
|
|
Sets or gets the value.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
class App extends React.PureComponent<{}, ICheckBoxProps> {
private myCheckBox = React.createRef<JqxCheckBox>();
public componentDidMount(): void {
this.myCheckBox.current!.val();
}
public render() {
return (
<JqxCheckBox ref={this.myCheckBox}
>
Check Me Out!
</JqxCheckBox>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|