Submit your widget

lightweight jQuery plugin with beauty to checkboxes

Created 3 years ago   Views 8845   downloads 1539    Author fntneves
 lightweight jQuery plugin with beauty to checkboxes
View DemoDownload 53.0 KB
21
Share |

This is a nice and lightweight jQuery plugin that gives beauty to checkboxes and radio buttons and allows custom labels for each status of (un)checked inputs.

Fast Usage

 

Write your checkbox or radio input in body section and call labelauty() to beautify it. Note: Call plugin when document is ready. See below:

<input type="checkbox"/>
$(document).ready(function(){
    $(":checkbox").labelauty();
});

Use Cases

  • If you want to create user-friendly websites, this is the right choice!

  • Very useful in remember me checkboxes, in settings panel, etc.

How does it work ?

The above case will generate one checkbox with default labels "Checked" and "Unchecked", one for each input state.

You can change the default labels (see Options section) or give custom labels to each checkbox, like the following example:

<input type="checkbox" data-labelauty="Don't synchronize files|Synchronize my files"/>
$(document).ready(function(){
    $(":checkbox").labelauty();
});

The data-labelauty attribute of radio and checkbox inputs lets you write custom labels forunchecked|checked cases. Pipe character |, is the default separator between these two labels. You can change it (see Options section).

The data-labelauty attribute can be used in three different ways:


Unchecked|Checked

To choose a custom label for Unchecked and Checked states.

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

Read more:https://github.com/fntneves/jquery-labelauty