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);

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);

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);

Sets or gets the check state.

'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);

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);

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);

Sets or gets the group name. When this property is set, the checkboxes in the same group behave as radio buttons.

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);

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);

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);

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);

/* 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);

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);

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);

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);

This event is triggered when the checkbox's checked property is going to be null.

Code examples

Bind to the indeterminate event of jqxCheckBox.

This event is triggered when the checkbox is unchecked.

Code examples

Bind to the unchecked event of jqxCheckBox.

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);

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);

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);

Enables the checkbox.

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);

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);

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);

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);

Unchecks the checkbox.

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);