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:
- flat
- futurico
- line
- minimal
- polaris
- square
All these subfolder are different themes designed to match your application design.
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
Other cool features added to asp .net controls using jQuery:
Let's try some other themes:
- iCheck futurico theme demo
To use futurico theme you need to make following changes:
- iCheck line theme demo
To use line theme you need to make following changes:
- iCheck minimal theme demo
To use minimal theme you need to make following changes:
- iCheck polaris theme demo
To use polaris theme you need to make following changes:
- iCheck square theme demo
To use square theme you need to make following changes:
Special thanks to
Damir Sultanov for creating such a wonderfull plugin.