Step 1: Create controller (e.g. HomeController) and view (e.g. Index) in ASP.NET MVC 4.

Step 2: Copy and Paste below code on View page

<style type="text/css">
    .ez-hide
    {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    .ez-checkbox
    {
        background: transparent url('../images/checkbox1.png') 0 1px no-repeat;
        display: inline-block;
        border: 1px solid black;
        width: 23PX;
        height: 23px;
    }
   .ez-checked
    {
        background-position: 0 -28px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    (function ($) {
        $.fn.ezMark = function (options) {
            options = options || {};
            var defaultOpt = {
                checkboxCls: options.checkboxCls || 'ez-checkbox',
                checkedCls: options.checkedCls || 'ez-checked', selectedCls: options.selectedCls || 'ez-selected',
                hideCls: 'ez-hide'
            };
            return this.each(function () {
                var $this = $(this);
                var wrapTag = $this.attr('type') == 'checkbox' ? '<div class="' + defaultOpt.checkboxCls + '">' : '<div class="' + defaultOpt.radioCls + '">';
                // for checkbox
                if ($this.attr('type') == 'checkbox') {
                    $this.addClass(defaultOpt.hideCls).wrap(wrapTag).change(function () {
                        if ($(this).is(':checked')) {
                            $(this).parent().addClass(defaultOpt.checkedCls);
                        }
                        else { $(this).parent().removeClass(defaultOpt.checkedCls); }
                    });
                    if ($this.is(':checked')) {
                        $this.parent().addClass(defaultOpt.checkedCls);
                    }
                }
            });
        }
    })(jQuery);
</script>
<script type="text/javascript">
    $(function () {
        $('.defaultP input').ezMark();
        $('.customP input[type="checkbox"]').ezMark({ checkboxCls: 'ez-checkbox-green', checkedCls: 'ez-checked-green' })
    });     
</script>
<table>
    <tr>
        <td>
            <span class="defaultP">
                <input type="checkbox" name="avadhesh" value="1" id="chkid" checked="checked" style="width: 23px;
                    height: 23px; margin-left: -1px; margin-top: -1px;" /></span>
        </td>
       <td>
           <span>Temperature</span>
        </td>
    </tr>
</table>

Step3: create a folder (e.g. Images) in project Solution Explorer paste below image within this folder. For copy below image, right click on image and save in your local drive.

Step4: change image path in CSS tag.

I hope you enjoy this blog.