Blog
    C#
    ADO.Net
    .NET
    ASP.Net & Web Forms
    Custom Controls
    Web Development
    Exception Handling
    XML
    Database
    Security in .Net
    Testing
    Web Services
    Windows Services
    Windows Controls
    WCF
    AJAX
    WPF
    XAML
    Reporting
    Setup
    VB.Net
    LINQ
    JQuery
    SilverLight
    JavaScript
    HTML5
    Crystal Report
    Cloud Computing
    Share Point
    Visual C++
    MVC
    Android
    PHP
    Java
    HTML
    WordPress
    Joomla
    Products
    Drupal
    Windows Phone
    JSON
    LightSwitch
    iPhone/iPad
    Ruby on Rails
    IIS 7
    Windows 8
    CSS/CSS3
    Excel
    MS Access
    Shortcut Keys
    Visual SourceSafe
    Team Foundation Server
    API(s)
    Sencha-Touch
    Single Page App
    Bootstrap
Follow Us
Follow _MindStick_ on Twitter View MindStick Software's LinkedIn profile View MindStick Software's Facebook profile
Top Contributor
Advertisement
Advertise with Us
Mindstick
Article Article  Forum Forum  Blog Blog  Quiz Quiz  Beginner Beginner  Careers Careers  Contact Contact  Login Login  
Home | Product | Services | About Us | Interview | DeveloperSection | Submit an Article | Submit Blog
Report Abuse Form
Reason:    
 

Home >> MVC >> Custom Checkbox in ASP.Net MVC 4 Razor
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
Views: 2363     Comments: 0
by AVADHESH PATEL on 12/4/2012

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.

Title :  
Comment :
Text ColorBackground Color
BoldItalicUnderline
LeftCenterRightJustify
Ordered ListBulleted List
IndentOutdent
Horizontal Rule
SubscriptSuperscript
HyperlinkImage
Design ModeDesign
View HtmlHtml
       
 
Report Abuse Form
Reason:    
 
Latest ArticleRSS Feed
    
    
    
    
    
    
    
    
    
    
More...
Latest Blogs by AVADHESH PATELRSS Feed
    
    
    
    
    
    
    
    
    
    
More...
Top Viewed ArticlesRSS Feed
    
    
    
    
    
    
    
    
    
    
Top Viewed BlogsRSS Feed
    
    
    
    
    
    
    
    
    
    
Latest Interview QuestionsRSS Feed
    
    
    
    
    
    
    
    
    
    
More...
Total Online Users: 5092
  
Copyright © 2014MindStick. All Rights Reserved.