Since the native radio button is used as a proxy for the custom radio button, you can watch for events on the original, native radio button instead of needing to go through the radio button plugin. Bind to the change event by type: change, blur, focus, keypress, click, etc.
+$("input[type='radio']").bind( "change", function(event, ui) { + ... +}); +
The radio button plugin has the following custom events:
create
This event is used to find out when a custom radio button was created. It is not used to create a custom radio button. The radio button create event can be used like this:
+$("input[type='radio']").checkboxradio({ + create: function(event, ui) { ... } +}); +
Radio buttons are used to provide a list of options where only a single items can be selected. Traditional desktop radio buttons are not optimized for touch input so in jQuery Mobile, we style the label for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.
label
Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible.
The radio button has the following methods:
enable
+ $("input[type='radio']").checkboxradio('enable'); +
disable
+$("input[type='radio']").checkboxradio('disable'); +
refresh
+$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh"); +
The radio button has the following options:
theme
default: null, inherited from parent
Sets the theme swatch color scheme for the radio button. This is a single letter from a-z that maps to the swatches included in your theme. By default, a radio button will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: data-theme="a"
data-theme="a"
$("input[type='radio'").checkboxradio({ theme: "a" });