Sets or gets the delay of the fade animation when the CheckBox is going to be checked.

Code examples

Set the animationShowDelay property.

$('#jqxCheckBox').jqxCheckBox({ animationShowDelay: 200 }); 

Get the animationShowDelay property.

var animationShowDelay = $('#jqxCheckBox').jqxCheckBox('animationShowDelay'); 

Sets or gets the delay of the fade animation when the CheckBox is going to be unchecked.

Code examples

Set the animationHideDelay property.

$('#jqxCheckBox').jqxCheckBox({ animationHideDelay: 200 }); 

Get the animationHideDelay property.

var animationHideDelay = $('#jqxCheckBox').jqxCheckBox('animationHideDelay'); 

Sets or gets the checkbox's size.

Code examples

Set the boxSize property.

$('#jqxCheckBox').jqxCheckBox({ boxSize:"15px" }); 

Get the boxSize property.

var boxSize = $('#jqxCheckBox').jqxCheckBox('boxSize'); 

Sets or gets the check state.

Possible Values:(when the hasThreeStates property value is true)

'true'

'false'

'null'

Code examples

Set the checked property.

$('#jqxCheckBox').jqxCheckBox({ checked:true }); 

Get the checked property.

var checked = $('#jqxCheckBox').jqxCheckBox('checked'); 

Sets or gets whether the CheckBox is disabled.

Code examples

Set the disabled property.

$('#jqxCheckBox').jqxCheckBox({ disabled:true }); 

Get the disabled property.

var disabled = $('#jqxCheckBox').jqxCheckBox('disabled');

Sets or gets whether the clicks on the container are handled as clicks on the check box.

Code examples

Set the enableContainerClick property.

$('#jqxCheckBox').jqxCheckBox({enableContainerClick :true }); 

Get the enableContainerClick property.

var enableContainerClick = $('#jqxCheckBox').jqxCheckBox('enableContainerClick'); 

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

Code examples

Set the groupName property.

$('#jqxCheckBox').jqxCheckBox({groupName :"Panel" }); 

Get the groupName property.

var groupName = $('#jqxCheckBox').jqxCheckBox('groupName'); 

Sets or gets the jqxCheckBox's height.

Code examples

Set the height property.

$('#jqxCheckBox').jqxCheckBox({height:"400px"});

Get the height property.

var height = $('#jqxCheckBox').jqxCheckBox('height');

Sets or gets whether the checkbox has 3 states - checked, unchecked and indeterminate.

Code examples

Set the hasThreeStates property.

$('#jqxCheckBox').jqxCheckBox({ hasThreeStates:true }); 

Get the hasThreeStates property.

var hasThreeStates = $('#jqxCheckBox').jqxCheckBox('hasThreeStates'); 

Sets or gets whether the checkbox is locked. In this mode the user is not allowed to check/uncheck the checkbox.

Code examples

Set the locked property.

$('#jqxCheckBox').jqxCheckBox({locked :true }); 

Get the locked property.

var locked = $('#jqxCheckBox').jqxCheckBox('locked'); 

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxCheckBox').jqxCheckBox({rtl : true}); 

Get the rtl property.

var rtl = $('#jqxCheckBox').jqxCheckBox('rtl'); 

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Sets or gets the jqxCheckBox's width.

Code examples

Set the width property.

$('#jqxCheckBox').jqxCheckBox({width:"200px"});

Get the width property.

var width = $('#jqxCheckBox').jqxCheckBox('width');

This event is triggered when the checkbox is checked.

Code examples

Bind to the checked event by type: jqxCheckBox.

$('#jqxCheckBox').on('checked', function (event) { // Some code here. }); 

This is triggered when the checkbox's state changes from one state to another.

Code examples

Bind to the change event by type: jqxCheckBox.

$('#jqxCheckBox').on('change', function (event) { var checked = event.args.checked;   var type = event.args.type; // keyboard, mouse or null depending on how the value was changed. }); 

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

Code examples

Bind to the indeterminate event by type: jqxCheckBox.

$('#jqxCheckBox').on('indeterminate', function (event) { // Some code here. }); 

This event is triggered when the checkbox is unchecked.

Code examples

Bind to the unchecked event by type: jqxCheckBox.

$('#jqxCheckBox').on('unchecked', function (event) { // Some code here. }); 

Checks the checkbox.

Code example

Invoke the check method.

$('#jqxCheckBox').jqxCheckBox('check');

Disables the checkbox.

Code example

Invoke the disable method.

$('#jqxCheckBox').jqxCheckBox('disable');

Destroys the widget.

Code examples

Invoke the destroythod.

$('#jqxCheckBox').jqxCheckBox('destroy'); 

Enables the checkbox.

Code example

Invoke the enable method.

$('#jqxCheckBox').jqxCheckBox('enable');

Focuses the widget.

Code examples

Invoke the focus method.

$('#jqxCheckBox').jqxCheckBox('focus'); 

Sets the indeterminate state(checked property value is going to be null after calling this method).

Code example

Invoke the indeterminate method.

$('#jqxCheckBox').jqxCheckBox('indeterminate');

Renders the widget.

Code examples

Invoke the render method.

$('#jqxCheckBox').jqxCheckBox('render'); 

Toggles the check state. This method is automatically called when the user clicks the checkbox.

Code example

Invoke the toggle method.

$('#jqxCheckBox').jqxCheckBox('toggle');

Unchecks the checkbox.

Code example

Invoke the uncheck method.

$('#jqxCheckBox').jqxCheckBox('uncheck');

Sets or gets the value.

Code example

Invoke the val method.

// Get the value.

var value = $("#jqxCheckBox").jqxCheckBox('val');

// Get the value using jQuery's val()

var value = $("#jqxCheckBox").val();

// Set value.

$("#jqxCheckBox").jqxCheckBox('val', true);

// Set value using jQuery's val().

$("#jqxCheckBox").val(true);