jQuery Tunable Check/Radio Box Plugin - Tunable Radiobox

File Size: 5.99KB
Views Total: 568
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Tunable Check/Radio Box Plugin - Tunable Radiobox

Tunable Radiobox is a lightweight jQuery plugin that enables you to create tunable check box or radio box with CSS3 to make your form elements look nice.

You might also like:

How to use it:

1. Include jQuery library and jquery-tunable-radiobox.js on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery-tunable-radiobox.js"></script>

2. Include jQuery Tunable Radiobox CSS

<link href="jquery-tunable-radiobox.css" rel="stylesheet" type="text/css">

3. Markup

<!-- Demo for Check Box -->
<div id="demo1"></div>
<!-- Demo for Radio Box -->
<div id="demo2"></div>

4. Initialize plugin with options

<script type="text/javascript">
$('#demo1').radiobox({
    type : 'checkbox',
    count : 4
}, 'jQuery Script Dot Net');

$('#demo2').radiobox({
    type : 'radio',
    count : 2
}, 'jQuery Plugins');
</script>

5. All options

$('#demo').radiobox({
    type : 'checkbox', // 'checkbox' or 'radio', required
    count : 3, // required count of elements which will be generated
    width : 14,
    height : 14,
    time : 100, // time of fadein checking animation
    checked: [0,2], // list of prechecked elements
    fillColor: '#bb0000' // color of checked element
}, 'element1 element2 element3');

Change Log:

v1.0.4 (2013-03-15)

  • added 'getchecked' method

v1.0.3 (2013-03-13)

  • added prechecked functionality

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.