Styling radiobuttons and checkboxes in asp .net using Jquery iCheck plugin

In this asp .net tutorial we will learn how to apply custom style to radio buttons and checkboxes in asp .net using iCheck Jquery plugin. iCheck is a well written and documented plugin created by Damir Sultanov.

iCheck has multiple predefined themes to match your application design. iCheck is supported in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also supported.

1. Download iCheck plugin

iCheck plugin is released under the MIT License. You can use it in personal and commercial projects. You can download iCheck plugin from here.

2. Copy required files

Copy "skins" folder and "icheck.min.js" from the downloaded files and paste in your asp .net application.

Under skins folder you can see subfolders like:

  1. flat
  2. futurico
  3. line
  4. minimal
  5. polaris
  6. square
All these subfolder are different themes designed to match your application design. 
Styling radiobuttons and checkboxes in asp .net using Jquery iCheck plugin

3. Add reference to Jquery and CSS files.

        
        
        
    
Note: Here last link to the style sheet depends upon which theme you want to use in your application. For this asp .net tutorial purpose I am using flat theme.

Available color schemes are:

  • Black — flat.css
  • Red — red.css
  • Green — green.css
  • Blue — blue.css
  • Aero — aero.css
  • Grey — grey.css
  • Orange — orange.css
  • Yellow — yellow.css
  • Pink — pink.css
  • Purple — purple.css

4. Initialize iCheck plugin

Place these lines between your head tag or before closing body tag.
        
    
Note: Here value of "checkboxClass" and "radioClass" options depends upon the theme you want to use. For this asp .net tutorial purpose I am using flat theme.

Place RadioButtonList and CheckBoxList to style

        
            
            
        

        
            
            
        
    

Radiobuttons and checkboxes custom style demo in asp .net


Styling radiobuttons and checkboxes in asp .net using Jquery iCheck plugin demo

Other cool features added to asp .net controls using jQuery:

Let's try some other themes:

  1. iCheck futurico theme demo
  2. To use futurico theme you need to make following changes:
      
                    
                    
                    
                
            
    
Styling radiobuttons and checkboxes in asp .net using Jquery iCheck plugin futurico theme demo

  3. iCheck line theme demo
  4. To use line theme you need to make following changes:
                    
                
                  
            
    
Styling radiobuttons and checkboxes in asp .net using Jquery iCheck plugin line theme demo

  5. iCheck minimal theme demo
  6. To use minimal theme you need to make following changes:
     
            
            
    
Styling radiobuttons and checkboxes in asp .net using Jquery iCheck plugin minimal theme demo

  7. iCheck polaris theme demo
  8. To use polaris theme you need to make following changes:
             
            
            
            
    
Styling radiobuttons and checkboxes in asp .net using Jquery iCheck plugin polaris theme demo

  9. iCheck square theme demo
  10. To use square theme you need to make following changes:
                     
                
             
            
    
Styling radiobuttons and checkboxes in asp .net using Jquery iCheck plugin square theme demo

Special thanks to Damir Sultanov for creating such a wonderfull plugin.
Best quality Asp .Net Ajax Control Toolkit tutorials.

Give your valuable comments.

Name
Email
Comment
6 + 6 =
 

About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
50+ C# Programs for beginners to practice