checkboxradio JQuery UI


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>
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>


plus2net.com



Post your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer