15+ jQuery Radio Button & Checkbox Style Plugins

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:

10 JQUERY IPHONE STYLE PLUGINS

1. jQuery prettyCheckable

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

Source + Demo

2. iCheck

Highly customizable checkboxes and radio buttons for jQuery and Zepto.

Source Demo

3. ScrewDefaultButtons

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

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).

Source Demo

5. Kalypto

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

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.

Source

Demo

7. jQuery Radiobutton Plugin

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

Source + Demo

8. Niceforms

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

Source Demo

9. jQuery checkbox v.1.3.0 Beta 1

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

Source + Demo

10. jqTransform

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

Source + Demo

11. iOS Checkboxes

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

Source + Demo

12. jQuery Fancy Custom Radio-button and Checkbox

jQuery Fancy Custom Radio-button and Checkbox

Source Demo

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.

Source + Demo

14. jQuery Checkbox and Radio Button Styling

A cross-browser checkbox and radio button script.

Source Demo

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.

Source Demo

16. ezMark: jQuery Checkbox & Radiobutton Plugin

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

Source Demo

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.

Source + Demo

Frequently Asked Questions (FAQs) about jQuery Radio Button and Checkbox Style Plugins

How can I customize the look of my radio buttons and checkboxes using jQuery plugins?

jQuery plugins offer a wide range of customization options for radio buttons and checkboxes. You can change the color, size, shape, and even the animations of these elements. To do this, you first need to include the jQuery library and the plugin’s script in your HTML file. Then, you can call the plugin’s function on the radio button or checkbox element and pass in an options object to customize its appearance. The options available depend on the specific plugin you’re using, so it’s best to refer to the plugin’s documentation for more details.

What are some of the best jQuery plugins for styling radio buttons and checkboxes?

There are numerous jQuery plugins available for styling radio buttons and checkboxes. Some of the most popular ones include iCheck, Uniform, Switchery, and Bootstrap Switch. These plugins offer a variety of customization options and are easy to implement. They also have good browser compatibility and are regularly updated by their developers.

How can I check if a radio button or checkbox is selected using jQuery?

You can check if a radio button or checkbox is selected using the ‘:checked’ selector in jQuery. For example, to check if a radio button with the id ‘myRadioButton’ is selected, you can use the following code:

if ($('#myRadioButton').is(':checked')) {
// The radio button is selected
} else {
// The radio button is not selected
}

Can I use jQuery plugins to create survey forms?

Yes, jQuery plugins can be very useful for creating survey forms. They can help you style the form elements, validate the form data, and even handle the form submission. Some plugins like SurveyJS also provide advanced features like conditional questions and multi-page surveys.

How can I handle the change event of a radio button or checkbox using jQuery?

You can handle the change event of a radio button or checkbox using the ‘change’ method in jQuery. This method attaches an event handler function to the ‘change’ event, which is triggered whenever the user changes the state of the radio button or checkbox. Here’s an example:

$('#myRadioButton').change(function() {
if ($(this).is(':checked')) {
// The radio button was selected
} else {
// The radio button was deselected
}
});

How can I disable a radio button or checkbox using jQuery?

You can disable a radio button or checkbox using the ‘prop’ method in jQuery. This method sets the ‘disabled’ property of the element to ‘true’. Here’s how you can do it:

$('#myRadioButton').prop('disabled', true);

Can I use jQuery plugins to create toggle switches?

Yes, some jQuery plugins like Switchery and Bootstrap Switch allow you to create toggle switches. These switches can be used as an alternative to checkboxes, and they provide a more visually appealing way for users to select options.

How can I group radio buttons using jQuery?

Radio buttons are grouped by giving them the same ‘name’ attribute. When radio buttons are in the same group, only one of them can be selected at a time. jQuery doesn’t provide a specific method for grouping radio buttons, but you can use it to manipulate the ‘name’ attribute of the radio buttons.

How can I style a checkbox to look like a button using jQuery?

Some jQuery plugins like ButtonCheckbox and Bootstrap Switch allow you to style checkboxes to look like buttons. These plugins provide a variety of customization options, and they can be a great way to enhance the user interface of your web application.

Can I use jQuery plugins to create rating systems?

Yes, there are several jQuery plugins like RateIt and jRating that allow you to create rating systems. These plugins can be used to create star ratings, thumb ratings, and other types of rating systems. They also provide options for customizing the appearance and behavior of the rating system.