Sets or gets the jqxRadioButton's width.

Code examples

Set the width property.

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

Get the width property.

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

Sets or gets the jqxRadioButton's height.

Code examples

Set the height property.

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

Get the height property.

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

Sets or gets whether the Radio Button is disabled.

Code examples

Set the disabled property.

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

Get the disabled property.

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

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.

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

Get the rtl property.

var rtl = $('#jqxRadioButton').jqxRadioButton('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 delay of the fade animation when the Radio Button is going to be checked.

Code examples

Set the animationShowDelay property.

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

Get the animationShowDelay property.

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

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

Code examples

Set the animationHideDelay property.

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

Get the animationHideDelay property.

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

Sets or gets the Radio Button's size.

Code examples

Set the boxSize property.

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

Get the boxSize property.

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

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

Code examples

Set the hasThreeStates property.

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

Get the hasThreeStates property.

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

Sets or gets whether the clicks on the container are handled as clicks on the rounded button.

Code examples

Set the enableContainerClick property.

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

Get the enableContainerClick property.

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

Sets or gets the group name. When this property is set, checking a radio button from the group, will uncheck only the radio buttons from the same group.

Code examples

Set the groupName property.

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

Get the groupName property.

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

This event is triggered when the Radio Button is checked.

Code examples

Bind to the checked event by type: jqxRadioButton.

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

This event is triggered when the Radio Button is unchecked.

Code examples

Bind to the unchecked event by type: jqxRadioButton.

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

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

Code examples

Bind to the change event by type: jqxRadioButton.

$('#jqxRadioButton').on('change', function (event) { var checked = event.args.checked; }); 

Checks the radio button.

Code example

Invoke the check method.

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

Unchecks the radio button.

Code example

Invoke the uncheck method.

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

Disables the radio button.

Code example

Invoke the disable method.

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

Enables the radio button.

Code example

Invoke the enable method.

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

Focuses the widget.

Code examples

Invoke the focus method.

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

Renders the widget.

Code examples

Invoke the render method.

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

Destroys the widget.

Code examples

Invoke the destroythod.

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

Sets or gets the value.

Code example

Invoke the val method.

// Get the value.

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

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

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

// Set value.

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

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

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