Home > DeveloperSection > Blogs > Custom Checkbox in ASP.Net MVC 4 Razor

Custom Checkbox in ASP.Net MVC 4 Razor

Posted by  AVADHESH PATEL
on    December-04-2012 1:16 AM

ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 2544  View(s)
Rate this:

Custom Checkbox in ASP.Net MVC 4 Razor

Here I have described how to create custom checkbox in ASP.Net MVC 4. This custom checkbox support all browsers (Internet Explorer, Mozilla, Chrome, Opera and Safari) with latest updates. Stapes are given below

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.
















Recent Activities


Ankita Pandey Created New Discussion How to Make Autocomplete textbox using jquery ?   16 hours ago

Kamlakar Singh added new Article Hashtable And Dictionary in C#   21 hours ago

Kamlakar Singh added new Blog C# Hashtable   21 hours ago

Top Contributors

Don't want to miss updates? Please click the below button!