Properties

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

Events

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.

Methods

NameArgumentsReturn 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

Enables the checkbox.

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

Unchecks the checkbox.

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