15+ jQuery Radio Button & Checkbox Style Plugins

Sam Deering

Today we are giving you a list of 15+ jQuery Radio Button & Checkbox Style Plugins — A collection of simple, lightweight, style-able radio button and checkbox plugins using jQuery. Enjoy! :)

Update 29/09/13: Added 17. jQuery Uniform Plugin

Related Posts:

1. jQuery prettyCheckable

This plugin replaces the default checkboxes and radio inputs for better looking ones.

jQuery-prettyCheckable.jpg
Source + Demo

2. iCheck

Highly customizable checkboxes and radio buttons for jQuery and Zepto.

iCheck.jpg
SourceDemo

3. ScrewDefaultButtons

A simple jQuery plugin allowing you to replace the browser defaults for radio buttons and checkboxes with your own custom design.

ScrewDefaultButtons.jpg
Source + Demo

4. Fancy checkboxes and radio buttons with CSS

Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included).

Fancy-Checkboxes-and-Radio-Buttons.jpg
SourceDemo

5. Kalypto

A basic plugin to use a simple sprite and CSS in place of a checkbox or radio button.

Kalypto.jpg
Source + Demo

6. CSS and jQuery Custom Checkbox and Radio Button Inputs Styled

Styling checkbox and radio button inputs to match a custom design is nearly impossible because neither reliably supports basic CSS, like background colors or images; it’s even a challenge to get the margins to appear consistently across browsers.

CSS-jQuery-Custom-Checkbox-and-Radio-Button.jpg
SourceDemo

7. jQuery Radiobutton Plugin

This is a very simple radiobutton plugin for jQuery. It’s simple, lightweight and easily styllable.

jQuery-RadioButton.jpg
Source + Demo

8. Niceforms

A non-intrusive javascript method that allows complete customization of web forms.

NiceForms.jpg
SourceDemo

9. jQuery checkbox v.1.3.0 Beta 1

Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.

jQuery-Checkbox.jpg
Source + Demo

10. jqTransform

This plugin is a jQuery styling plugin wich allows you to skin form elements.

jqTransform.jpg
Source + Demo

11. iOS Checkboxes

iphone-style-checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes.

iOS-Checkboxes.jpg
Source + Demo

12. jQuery Fancy Custom Radio-button and Checkbox

jQuery Fancy Custom Radio-button and Checkbox

jQuery-Fancy-Custom-Radio-Button-Checkbox.jpg
SourceDemo

13. iPhone Style Radio and Checkbox Switches using jQuery and CSS

A great interface for an administration panel, complete with great looking forms and buttons.

iPhone-Style-Radio-Checkbox.jpg
Source + Demo

14. jQuery Checkbox and Radio Button Styling

A cross-browser checkbox and radio button script.

jQuery-Checkbox-Radio-Button-Styling.jpg
SourceDemo

15. jQuery Plugin – Image Radio buttons

It’s only 2KB big and turns your normal radio buttons into images, you can set any images you like for src, checked and hover.

Image-Radio-Buttons.jpg
SourceDemo

16. ezMark: jQuery Checkbox & Radiobutton Plugin

A small jquery plugin gives the ability to stylize checkbox and radiobuttons.

ezMark-Checkbox-Radiobutton.jpg
SourceDemo

17. jQuery Uniform Plugin

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

uniform-checks
Source + Demo

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Gagan

    Awesome post..Very much needed..Thanks

  • Captain Coffee

    Don’t forget http://uniformjs.com/

    • http://jquery4u.com/ jQuery4u

      Cool thanks missed that one, I’ll add it to the list.

  • Siva Guru

    nice post… thank u..

  • mittulphp

    great post .. thanks

  • Nguyen Huy Hoang

    Thank you very much