Checkboxradio Widget

Categories: Widgets

Checkboxradio Widgetversion added: 1.12

Description: Converts inputs of type radio and checkbox to themeable buttons.

QuickNavExamples

Options

Methods

Events

Native HTML input elements are impossible to style consistently. This widget allows working around that limitation by positining the associated label on top of the hidden input, and emulating the checkbox or radio element itself using an (optional) icon. The original input still receives focus and all events, the label merely provides a themeable button on top.

Theming

The checkboxradio widget uses the jQuery UI CSS framework to style its look and feel. If checkboxradio specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:

  • ui-checkboxradio: The input of type radio or checkbox. Will be hidden, with its associated label positioned on top.
    • ui-checkboxradio-label: The label associated with the input. If the input is checked, this will also get the ui-checkboxradio-checked class. If the input is of type radio, this will also get the ui-checkboxradio-radio-label class.
    • ui-checkboxradio-icon: If the icon option is enabled, the generated icon has this class.
    • ui-checkboxradio-icon-space: If the icon option is enabled, an extra element with this class as added between the text label and the icon.

Dependencies

Additional Notes:

  • This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Options

classes 

Type: Object
Default: 
{
  "ui-checkboxradio-label": "ui-corner-all",
  "ui-checkboxradio-icon": "ui-corner-all"
}

Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.

Code examples:

Initialize the checkboxradio with the classes option specified, changing the theming for the ui-checkboxradio class:

1
2
3
4
5
 
$( ".selector" ).checkboxradio({
  classes: {
    "ui-checkboxradio": "highlight"
  }
});

Get or set a property of the classes option, after initialization, here reading and changing the theming for the ui-checkboxradio class:

1
2
3
4
5
 
// Getter
var themeClass = $( ".selector" ).checkboxradio( "option", "classes.ui-checkboxradio" );
 
// Setter
$( ".selector" ).checkboxradio( "option", "classes.ui-checkboxradio", "highlight" );

disabled 

Type: Boolean
Default: false
Disables the checkboxradio if set to true.
Code examples:

Initialize the checkboxradio with the disabled option specified:

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

Get or set the disabled option, after initialization:

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

icon 

Type: Boolean
Default: true
Whether to show the checkbox or radio icon, depending on the input's type.
Code examples:

Initialize the checkboxradio with the icon option specified:

1
2
3
 
$( ".selector" ).checkboxradio({
  icon: false
});

Get or set the icon option, after initialization:

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

label 

Type: String
Default: null
HTML to show in the button. When not specified (null), the HTML content of the associated <label> element is used.
Code examples:

Initialize the checkboxradio with the label option specified:

1
2
3
 
$( ".selector" ).checkboxradio({
  label: "custom label"
});

Get or set the label option, after initialization:

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

Methods

destroy()Returns: jQuery (plugin only)

Removes the checkboxradio functionality completely. This will return the element back to its pre-init state.
  • This method does not accept any arguments.
Code examples:

Invoke the destroy method:

1
 
$( ".selector" ).checkboxradio( "destroy" );

disable()Returns: jQuery (plugin only)

Disables the checkboxradio.
  • This method does not accept any arguments.
Code examples:

Invoke the disable method:

1
 
$( ".selector" ).checkboxradio( "disable" );

enable()Returns: jQuery (plugin only)

Enables the checkboxradio.
  • This method does not accept any arguments.
Code examples:

Invoke the enable method:

1
 
$( ".selector" ).checkboxradio( "enable" );

instance()Returns: Object

Retrieves the checkboxradio's instance object. If the element does not have an associated instance, undefined is returned.

Unlike other widget methods, instance() is safe to call on any element after the checkboxradio plugin has loaded.

  • This method does not accept any arguments.
Code examples:

Invoke the instance method:

1
 
$( ".selector" ).checkboxradio( "instance" );

option( optionName )Returns: Object

Gets the value currently associated with the specified optionName.

Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.

  • optionName
    Type: String
    The name of the option to get.
Code examples:

Invoke the method:

1
 
var isDisabled = $( ".selector" ).checkboxradio( "option", "disabled" );

option()Returns: PlainObject

Gets an object containing key/value pairs representing the current checkboxradio options hash.
  • This signature does not accept any arguments.
Code examples:

Invoke the method:

1
 
var options = $( ".selector" ).checkboxradio( "option" );

option( optionName, value )Returns: jQuery (plugin only)

Sets the value of the checkboxradio option associated with the specified optionName.

Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.

  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.
Code examples:

Invoke the method:

1
 
$( ".selector" ).checkboxradio( "option", "disabled", true );

option( options )Returns: jQuery (plugin only)

Sets one or more options for the checkboxradio.
  • options
    Type: Object
    A map of option-value pairs to set.
Code examples:

Invoke the method:

1
 
$( ".selector" ).checkboxradio( "option", { disabled: true } );

refresh()Returns: jQuery (plugin only)

Refreshes the visual state of the widget. Useful for updating after the native element's checked or disabled state is changed programmatically.
  • This method does not accept any arguments.
Code examples:

Invoke the refresh method:

1
 
$( ".selector" ).checkboxradio( "refresh" );

widget()Returns: jQuery

Returns a jQuery object containing the checkboxradio.
  • This method does not accept any arguments.
Code examples:

Invoke the widget method:

1
 
var widget = $( ".selector" ).checkboxradio( "widget" );

Events

create( event, ui )Type: checkboxradiocreate

Triggered when the checkboxradio is created.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the checkboxradio with the create callback specified:

1
2
3
 
$( ".selector" ).checkboxradio({
  create: function( event, ui ) {}
});

Bind an event listener to the checkboxradiocreate event:

1
 
$( ".selector" ).on( "checkboxradiocreate", function( event, ui ) {} );

Example:

A simple jQuery UI checkboxradio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>checkboxradio demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<fieldset>
  <legend>Select a Location: </legend>
  <label for="radio-1">New York</label>
  <input type="radio" name="radio-1" id="radio-1">
  <label for="radio-2">Paris</label>
  <input type="radio" name="radio-1" id="radio-2">
  <label for="radio-3">London</label>
  <input type="radio" name="radio-1" id="radio-3">
</fieldset>
 
<script>
$( "input[type='radio']" ).checkboxradio();
</script>
 
</body>
</html>

Demo: