Customized Html Controls: Creating Custom Checkbox

Under “Customized Html Controls” section I will discuss about how to create and customized standard html controls. This is first article in this category. This will discuss about how we can create a custom checkbox using CSS and jQuery.

Checkbox Image

For this you need two images, one for checked state of checkbox and another for unchecked state of the checkbox. However, you can also use a single image containing both checked and unchecked state and use CSS trick like I use.

Checkbox CSS

Here is the CSS classes we will be going to use for the checkbox

.checkBox
{
    background-position: 0px 0px;
}

.checkBoxClear
{
    background-position: -21px 0px;
}

.checkBox, .checkBoxClear
{
    background-image: url('CheckBox.png');
    background-repeat: no-repeat;
    display: inline-block;
    float: left;
    width: 21px;
    height: 21px;
    padding: 0px;
    margin: 0px;
    cursor: hand;
}

Checkbox JavaScript

Finally below is the JavaScript code using jQuery which will control the checking and un-checking of our checkbox using click event. It will basically toggle the CSS which will change the state.

<script language="javascript" type="text/javascript">
<!--
$(document).ready(function()
{
    $(".checkBox,.checkBoxClear").click(function(srcc)
    {
        if ($(this).hasClass("checkBox"))
        {
            $(this).removeClass("checkBox");
            $(this).addClass("checkBoxClear");
        }
        else
        {
            $(this).removeClass("checkBoxClear");
            $(this).addClass("checkBox");
        }
    });        
});
//-->
</script>

Html Code

Here is a sample Custom Checkbox with the html code.

Select options

<h3>Select options</h3>
<div id="Div1" class="checkBox">&nbsp;</div>
<label for="Div1">
    Lorem ipsum dolor sit amet</label><br />
<div id="Div2" class="checkBox">
    &nbsp;</div>
<label for="Div2">
    Aenean vitae elit quis erat interdum tempus</label>
<div id="Div3" class="checkBox">
    &nbsp;</div>
<label for="Div3">
    Duis laoreet viverra quam</label>
<div id="Div4" class="checkBox">
    &nbsp;</div>
<label for="Div4">
    Mauris pellentesque tristique erat</label>

Discussion