CheckRadios – Create Beautiful Checkboxes and Radio Buttons For Html Use

Download   Demo

CheckRadios is a jQuery plugin that is designed to allow you to fully customize check boxes and radios without using standard images and with scalability in mind.

This plugin uses vector based icons/fonts to add in the ticks and circles which allows far greater customization as well as scalability and ultimately much greater control over the check boxes and radios using css.

Installation

Javascript

Include jquery.checkradios.min.js anywhere after jQuery, ideally at the bottom of the body tag.

<!-- jQuery - Required to use the jQuery plugin (Obviously) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- Checkradios plugin -->
<script src="<PATH-TO-PLUGIN>/jquery-checkradios/js/jquery.checkradios.min.js"></script>

CSS

Include the query.checkradios.min.css CSS in the head tag of your page

<!-- The main styles for the checkradios plugin to provide default styles -->
<link rel="stylesheet" href="<PATH-TO-PLUGIN>/jquery-checkradios/css/jquery.checkradios.min.css"/>

Usage

Basic Setup

To get started simply add the following to your Javascript:

$(document).ready(function()

 $('.checkradios').checkradios();

);

Then add your checkboxes and/or radios within your HTML:

<input type="checkbox" class="checkradios" checked/>
<input type="radio" class="checkradios" checked/>

 

CheckRadios – Create Beautiful Checkboxes and Radio Buttons For Html Use