checkboxradio UI to change standard checkbox radio buttons to themeable buttons with all styles and events

Checkbox and radio buttons along with the labels can be styled by using this widget.
We can use checkbox and radio elements as standard buttons with different styles and effects.

We can apply different themes available and still apply all the events and effects like normal checkbox or radio buttons.

<script>
$(document).ready(function() {
////////////////
$( ".r2,.c2" ).checkboxradio({
});
///
});
</script>

Options

classes
disabled
icon
label

Methods

destroy
disable
enable
instance
option
refresh
widget

Events

create

Classes

Type : Object
Default :

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

To get the associated Class of the Tab

var present_class = $( ".r2,c2" ).checkboxradio( "option", "classes.ui-checkboxradio"  );

To Set the class

$(".r3,c2").checkboxradio("option", "classes.ui-checkboxradio", "highlight" );

disabled

Type : Boolean
Default : false

$( ".r2" ).checkboxradio({
disabled:false
});

Specify checkboxradio to be disabled

$( "#my_checkboxradio" ).checkboxradio({
disabled:true   
});

Getting checkboxradio option disabled value

var status = $( ".r2" ).checkboxradio( "option", "disabled" )

To Set the disabled option

$( ".r2" ).checkboxradio( "option", "disabled", true)

We can enable or disable checkboxradio by using above code.

icon

Type : Boolean
Default : true

To show the checkbox or radio button icons

$( ".r2" ).checkboxradio({
icon : true
});

Getting show option value

var status = $( ".r2" ).checkboxradio("option", "icon");

To Set the icon option value

$(".r2").checkboxradio( "option","icon", true );

label

Type : String
Default : null

If option is set to null then the HTML associated with the button will be shown.
Here is the code to show custom label.

$( ".r2" ).checkboxradio({
label:'My Label'
});

Getting checkboxradio option lablel value

var status = $( ".r2" ).checkboxradio( "option", "label" )

To Set the track option

$( ".r2" ).checkboxradio( "option", "label", 'My Label')

Methods

Destroy()

Removes the functinality

$( ".r2" ).checkboxradio( "destroy" );

disable()

Disable the checkboxradio

$( ".r2" ).checkboxradio( "disable" );

We can enable and disable the elements by using both enable and disable methods.

enable()

Enable the checkboxradio (previously disabled )

$( ".r2" ).checkboxradio( "enable" );

instance()

Retrive checkboxradio instance object

$( ".r2" ).checkboxradio( "instance" );

option()

Get the value of the given Option name

var p_active = $( ".r2" ).checkboxradio( "option", "icon" )

We can get all the options with value by using an object containing key value pairs.

refresh()

After updating status of any native element , we have to refresh the checkboxradio to reflect the changes by invoking refresh

$( ".r2" ).checkboxradio( "refresh" )

widget()

Invoke the widget method

var widget = $( ".r2" ).checkboxradio( "widget" );

Events

create()

Triggered when checkboxradio is created

$( ".r2" ).checkboxradio({
  create: function( event, ui ) {}
});

Managing width font size of checkboxradio

<style>
.ui-button,  .ui-button-text .ui-button{  
font-size: 16px !important; 
}
</style>

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

checkboxradio JQuery UI

Managing width font size of checkboxradio

Subscribe

1

2

3

4