jQuery checkbox and radio with checked and unchecked labels

Creating labels of checkboxes by jQuery

In other tutorials related to checkboxes, I showed how you may create simple HTML checkboxes along with Bootstrap’s based classes here.

In this tutorial, a jQuery based plug-in is used for creating the labels of checkboxes. That means, the text of the label is clickable unlike the normal checkboxes and a check mark will display as it is clicked. As checkbox is unchecked, the other mark is displayed which is basically an image.

Another great point about this jQuery plug-in is, you may create different labels for checkbox’s checked and unchecked states.

To better understand this, have a look at the demos where checkboxes and radio are created by using jquery-labelauty plug-in. (You may download this plug-in here or download the JS file from the demo page’s view source below)

A demo of checkbox jQuery with labels

In this demo, three labeled checkboxes are created in different states.

The first checkbox is checked, so “Delete my account” label will display.
The second text box is unchecked, “I agree with the T&Cs” label will display.
The third checkbox is disabled.

Note: the labels for checked and unchecked states are separated by “|” sign in data-labelauty data attribute. Have a look:

See online demo and code

For setting up this nice plug-in, include the required files in the <head> section:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<script src=”js/jquery-labelauty/jquery-labelauty.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/jquery-labelauty/jquery-labelauty.css”>

The JS code for initiating the plug-in:

$(document).ready(function(){

$(".jquery-checkbox-label").labelauty({ minimum_width: "155px" });

$(".to-labelauty-icon").labelauty({ label: false });

});

</script>

The markup:

A demo of labelled checkboxes

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</section>

You see, the checkboxes are created normally. You just need to add the data-labelauty attribute in the input type checkbox tag along with using a few required classes.

Inside the data-labelauty attribute, use the label for the checkbox. On the left side of “|”, use the label for the unchecked state while on right side use the checked state label.

A demo of creating labeled jQuery radio buttons

In this demo, three radio buttons are created by using that plug-in. As such, in radio button group you may select only one option among two or more. This is accomplished by using the same name for multiple radio buttons.

The Male radio button is checked as web page loads. See the demo by clicking the link or image below:

See online demo and code

The markup:

A demo of jQuery radio buttons

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</section>

The script:

$(document).ready(function(){

$(".jquery-radio-label").labelauty({ minimum_width: "155px" });

$(".to-labelauty-icon").labelauty({ label: false });

});

A demo of creating unlabelled jQuery checkbox

For creating unlabelled checkboxes or radio buttons as using this plug-in with tick mark or unchecked mark, simply remove the data attribute for specifying the labels. Have a look at demo and code online

See online demo and code

Get the complete code from the demo page.

Checkbox, Forms

Creating labels of checkboxes by jQuery

A demo of checkbox jQuery with labels

See online demo and code

A demo of creating labeled jQuery radio buttons

See online demo and code

A demo of creating unlabelled jQuery checkbox

See online demo and code

Related Tutorials: