Custom Elements Documentation

animationShowDelay number 250

Sets or gets the animationShowDelay property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            animationShowDelay:300, theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

animationHideDelay number 300

Sets or gets the animationHideDelay property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            animationHideDelay:300, theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

boxSize string "13px"

Sets or gets the boxSize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            boxSize:15, theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

checked boolean false

Sets or gets the checked property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            checked:true, theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

disabled boolean false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            disabled:true, theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

enableContainerClick boolean true

Sets or gets the enableContainerClick property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            enableContainerClick:true, theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

groupName string ""

Sets or gets the groupName property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            groupName:"panel", theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

height number null

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            height:100, theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

hasThreeStates boolean false

Sets or gets the hasThreeStates property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            hasThreeStates:true, theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

locked boolean false

Sets or gets the locked property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            locked:true, theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

rtl boolean false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            rtl:true, theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

theme string ''

Sets or gets the theme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

width number null

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {            width:300, theme:"light"        }    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

checked Event

Code examples

Bind to the checked event of jqxCheckBox.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").addEventListener("checked", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

change Event

Code examples

Bind to the change event of jqxCheckBox.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").addEventListener("change", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

indeterminate Event

Code examples

Bind to the indeterminate event of jqxCheckBox.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").addEventListener("indeterminate", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

unchecked Event

Code examples

Bind to the unchecked event of jqxCheckBox.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").addEventListener("unchecked", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

check Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").check();								}    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

disable Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").disable();								}    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

destroy Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").destroy();								}    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

enable Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").enable();								}    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

focus Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").focus();								}    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

indeterminate Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").indeterminate();								}    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

render Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").render();								}    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

toggle Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").toggle();								}    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

uncheck Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		document.querySelector("jqx-check-box").uncheck();								}    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

val Method

Parameter	Type	Description
value	boolean

Return Value
Boolean

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Checkbox Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>    <script type="text/javascript">        JQXElements.settings["checkboxSettings"] =        {                    }	window.onload = function() {		var result = document.querySelector("jqx-check-box").val();								}    </script></head><body>   <jqx-check-box settings="checkboxSettings">Click me</jqx-check-box></body></html>

Custom Elements Documentation

Properties

Events

Code examples

Code examples

Code examples

Code examples

Methods