jQuery Plugin For Labeled Checkbox and Radio Button - Labelauty

Labelauty is a stunning and subtle jQuery plugin for creating checkboxes and radio buttons with checked or unchecked custom labels. The plugin makes use of data-labelauty attribute to create custom (un)checked label text that should be separated with '|' (vertical bar character).

Basic Usage:

1. Include jQuery javascript library on your web page.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

2. Include jQuery labelauty script and stylesheet on your web page.

<script type="text/javascript" src="jquery-labelauty.js"></script>
<link rel="stylesheet" href="ajquery-labelauty.css" type="text/css" media="screen" charset="utf-8" />

3. Create a standard Html checkbox. Using data-labelauty attribute to create your own (un)checked label text.

<input class="demo" type="checkbox" data-labelauty="Don't synchronize files|Synchronize my files" checked/>

4. Call the plugin with default options.

<script>
$(document).ready(function(){
$(".demo").labelauty({ 
// Development Mode
// This will activate console debug messages
development: false,

// Trigger Class
// This class will be used to apply styles
class: "labelauty",

// Use icon?
// If false, then only a text label represents the input
icon: true,

// Use text label ?
// If false, then only an icon represents the input
label: true,

// Separator between labels' messages
// If you use this separator for anything, choose a new one
separator: "|",

// Default Checked Message
// This message will be visible when input is checked
checked_label: "Checked",

// Default UnChecked Message
// This message will be visible when input is unchecked
unchecked_label: "Unchecked",

// Force random ID's
// Replace original ID's with random ID's,
force_random_id: false,

// Minimum Label Width
// This value will be used to apply a minimum width to the text labels
minimum_width: false,

// Use the greatest width between two text labels ?
// If this has a true value, then label width will be the greatest between labels
same_width: true
});
});
</script>

Change logs:

v1.1.3 (2017-08-13)

• Fixed CSP issue.
• Yarn integration.

v1.1.2 (2016-11-16)

• Add "icon" visibility true/false settings

v1.1.1 (2016-07-04)

• Added ARIA attributes

v1.1.0 (2015-03-14)

• Fixed: Not working with blank IDs.

v1.0.1 (2015-01-21)

• Fixed: Width returning 0 when element is hidden

 

---

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