Checkboxradio Widget

Categories: Widgets

Checkboxradio Widgetversion added: 1.0

Description: Creates a checkboxradio widget

QuickNav

Options

Methods

Events

The jQuery UI checkboxradio widget is bundled in jQuery Mobile with some changes. Thus, its API documentation fully describes its functionality.

Options

enhanced 

Type: Boolean
Default: false
Indicates that the markup necessary for a checkboxradio widget has been provided as part of the original markup.

This option is also exposed as a data attribute: data-enhanced="true".

Code examples:

Initialize the checkboxradio with the enhanced option specified:

1
2
3
 
$( ".selector" ).checkboxradio({
  enhanced: true
});

Get or set the enhanced option, after initialization:

1
2
3
4
5
 
// Getter
var enhanced = $( ".selector" ).checkboxradio( "option", "enhanced" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "enhanced", true );

iconpos 

Type: String
Default: "left"
Allows you to specify on which side of the checkbox or radio button the checkmark/radio icon will appear.

This option is also exposed as a data attribute: data-iconpos="right".

Code examples:

Initialize the checkboxradio with the iconpos option specified:

1
2
3
 
$( ".selector" ).checkboxradio({
  iconpos: "right"
});

Get or set the iconpos option, after initialization:

1
2
3
4
5
 
// Getter
var iconpos = $( ".selector" ).checkboxradio( "option", "iconpos" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "iconpos", "right" );

initSelector 

Type: Selector
Default: See below

The default initSelector for the checkboxradio widget is:

1
 
"input:not( :jqmData(role='flipswitch' ) )[type='checkbox'],input[type='radio']:not( :jqmData(role='flipswitch' ))"

Note: This option is deprecated in 1.4.0 and will be removed in 1.5.0.
As of jQuery Mobile 1.4.0, the initSelector is no longer a widget option. Instead, it is declared directly on the widget prototype. Thus, you may specify a custom value by handling the mobileinit event and overwriting the initSelector on the prototype:

1
2
3
 
$( document ).on( "mobileinit", function() {
  $.mobile.checkboxradio.prototype.initSelector = "div.custom";
});

Note: Remember to attach the mobileinit handler after you have loaded jQuery, but before you load jQuery Mobile, because the event is triggered as part of jQuery Mobile's loading process.

The value of this option is a jQuery selector string. The framework selects elements based on the value of this option and instantiates checkboxradio widgets on each of the resulting list of elements.

(version deprecated: 1.4.0)

mini 

Type: Boolean
Default: null (false)
If set to true, this will display a more compact version of the checkboxradio that uses less vertical height by applying the ui-mini class to the outermost element of the checkboxradio widget.

Note: mini option is deprecated in 1.5 and will be removed in 1.6

This option is also exposed as a data attribute: data-mini="true".

wrapperClass 

Type:
Default: null
It is difficult to write custom CSS for the wrapper div around the native input element generated by the framework. This option allows you to specify one or more space-separated class names to be added to the wrapper div element by the framework.

This option is also exposed as a data attribute: data-wrapper-class="custom-class".

Note: checkboxradio option is deprecated in 1.5 and will be removed in 1.6

Code examples:

Initialize the checkboxradio with the wrapperClass option specified:

1
2
3
 
$( ".selector" ).checkboxradio({
  wrapperClass: "custom-class"
});

Get or set the wrapperClass option, after initialization:

1
2
3
4
5
 
// Getter
var wrapperClass = $( ".selector" ).checkboxradio( "option", "wrapperClass" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "wrapperClass", "custom-class" );