Properties

NameTypeDefault
animationShowDelay Number 250

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

<template>
  <JqxCheckBox ref="myCheckBox"
    :animationShowDelay="300">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the animationShowDelay property.

let animationShowDelay = this.$refs.myCheckBox.animationShowDelay;
animationHideDelay Number 300

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

<template>
  <JqxCheckBox ref="myCheckBox"
    :animationHideDelay="500" :checked="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the animationHideDelay property.

let animationHideDelay = this.$refs.myCheckBox.animationHideDelay;
boxSize String "13px"

Sets or gets the checkbox's size. 

<template>
  <JqxCheckBox ref="myCheckBox"
    :boxSize="'15px'">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the boxSize property.

let boxSize = this.$refs.myCheckBox.boxSize;
checked Boolean false

Sets or gets the check state.

Possible Values: (when the hasThreeStates property value is true) 
'true'
'false'
'null'
<template>
  <JqxCheckBox ref="myCheckBox"
    :checked="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the checked property.

let checked = this.$refs.myCheckBox.checked;
disabled Boolean false

Sets or gets whether the CheckBox is disabled. 

<template>
  <JqxCheckBox ref="myCheckBox"
    :disabled="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the disabled property.

let disabled = this.$refs.myCheckBox.disabled;
enableContainerClick Boolean true

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

<template>
  <JqxCheckBox ref="myCheckBox"
    :enableContainerClick="false">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the enableContainerClick property.

let enableContainerClick = this.$refs.myCheckBox.enableContainerClick;
groupName String ""

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

<template>
  <div>
    <JqxCheckBox ref="checkBox1"
      :groupName="'panel'">
      Entertainment
    </JqxCheckBox>
    <JqxCheckBox ref="checkBox2"
      :groupName="'panel'">
      Computers
    </JqxCheckBox>
  </div>
</template>
 
<script>
import JqxCheckBox from "jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue";
export default {
  components: {
    JqxCheckBox
  }
};
</script>
height Number | String null

Sets or gets the jqxCheckBox's height. 

<template>
  <JqxCheckBox ref="myCheckBox"
    :height="100">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the height property.

let height = this.$refs.myCheckBox.height;
hasThreeStates Boolean false

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

<template>
  <JqxCheckBox ref="myCheckBox"
    :hasThreeStates="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the hasThreeStates property.

let hasThreeStates = this.$refs.myCheckBox.hasThreeStates;
locked Boolean false

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

<template>
  <JqxCheckBox ref="myCheckBox"
    :locked="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the locked property.

let locked = this.$refs.myCheckBox.locked;
rtl Boolean false

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

<template>
  <JqxCheckBox ref="myCheckBox"
    :rtl="true">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the rtl property.

let rtl = this.$refs.myCheckBox.rtl;
theme String ''

Sets the widget's theme.

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

    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  • Set the widget's theme property to 'material' when you initialize it. 
<template>
  <JqxCheckBox ref="myCheckBox"
    :theme="'material'">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the theme property.

let theme = this.$refs.myCheckBox.theme;
width Number | String null

Sets or gets the jqxCheckBox's width. 

<template>
  <JqxCheckBox ref="myCheckBox"
    :width="300">
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    }
  }
</script>

Get the width property.

let width = this.$refs.myCheckBox.width;

Events

checked Event

This event is triggered when the checkbox is checked.

Code examples

Bind to the checked event of jqxCheckBox. 

<template>
  <JqxCheckBox ref="myCheckBox" @checked="onChecked($event)"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    methods: {
      onChecked: function (event) {
        alert('do something...');
      }
    }
  }
</script>
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. 

<template>
  <JqxCheckBox ref="myCheckBox" @change="onChange($event)"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>
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. 

<template>
  <JqxCheckBox ref="myCheckBox" @indeterminate="onIndeterminate($event)"
    :hasThreeStates="true"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    methods: {
      onIndeterminate: function (event) {
        alert('do something...');
      }
    }
  }
</script>
unchecked Event

This event is triggered when the checkbox is unchecked.

Code examples

Bind to the unchecked event of jqxCheckBox. 

<template>
  <JqxCheckBox ref="myCheckBox" @unchecked="onUnchecked($event)"
    :checked="true"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    methods: {
      onUnchecked: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Methods

NameArgumentsReturn Type
check None None

Checks the checkbox. 

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.check();
    }
  }
</script>
disable None None

Disables the checkbox. 

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.disable();
    }
  }
</script>
destroy None None

Destroys the widget. 

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.destroy();
    }
  }
</script>
enable None None

Enables the checkbox. 

<template>
  <JqxCheckBox ref="myCheckBox"
    :disabled="true"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.enable();
    }
  }
</script>
focus None None

Focuses the widget. 

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.focus();
    }
  }
</script>
indeterminate None None

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

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.indeterminate();
    }
  }
</script>
render None None

Renders the widget. 

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.render();
    }
  }
</script>
toggle None None

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

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.toggle();
    }
  }
</script>
uncheck None None

Unchecks the checkbox. 

<template>
  <JqxCheckBox ref="myCheckBox"
  :checked="true"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      this.$refs.myCheckBox.uncheck();
    }
  }
</script>
val value Boolean

Sets or gets the value. 

<template>
  <JqxCheckBox ref="myCheckBox"
   >
    Check Me Out!
  </JqxCheckBox>
</template>
 
<script>
  import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';
 
  export default {
    components: {
      JqxCheckBox
    },
    mounted: function () {
      const value = this.$refs.myCheckBox.val();
    }
  }
</script>