iCheck

by il kamil

HTML

<script src="http://fronteed.com/iCheck/icheck.js"></script>
<script src="http://fronteed.com/iCheck/demo/js/custom.min.js"></script>
<link rel="stylesheet" href="http://fronteed.com/iCheck/skins/all.css">
<div class="demo-list">
    <p>Minimal skin</p>
    <form>
    <ul>
        <li>
            <input tabindex="1" type="checkbox" id="input-1" class="minimal">
            <label for="input-1">Checkbox</label>
        </li>
        <li>
            <input tabindex="2" type="checkbox" id="input-2" checked class="minimal">
            <label for="input-2">Checkbox</label>
        </li>
    <li>
        <input tabindex="3" type="radio" id="input-3" name="demo-radio" class="minimal">
        <label for="input-3">Radio button</label>
    </li>
    <li>
        <input tabindex="4" type="radio" id="input-4" name="demo-radio" checked class="minimal">
        <label for="input-4">Radio button</label>
    </li>
    </ul>
    </form>
</div>
        
        
<div class="demo-list">
    <p>Square skin</p>
    <form>
    <ul>
        <li>
            <input tabindex="5" type="checkbox" id="input-5" class="square">
            <label for="input-5">Checkbox</label>
        </li>
        <li>
            <input tabindex="6" type="checkbox" id="input-6" checked class="square">
            <label for="input-6">Checkbox</label>
        </li>
        <li>
            <input tabindex="7" type="radio" id="input-7" name="demo-radio" class="square">
            <label for="input-7">Radio button</label>
        </li>
        <li>
            <input tabindex="8" type="radio" id="input-8" name="demo-radio" checked class="square">
            <label for="input-8">Radio button</label>
        </li>
    </ul>
    </form>
</div>

CSS

.demo-list ul li {
    list-style:none;
    margin-bottom:8px;
}

JavaScript

$(document).ready(function () {
     var callbacks_list = $('.demo-callbacks ul');
     $('.demo-list input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function (event) {
         callbacks_list.prepend('<li><span>#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
     }).iCheck({
         checkboxClass: 'icheckbox_square-blue',
         radioClass: 'iradio_square-blue',
         increaseArea: '20%'
     });
 });

 $('.demo-list input.grey').iCheck({
     checkboxClass: 'icheckbox_flat-grey',
     radioClass: 'iradio_flat-grey'
 });

 $('input.red').iCheck({
     checkboxClass: 'icheckbox_flat-red',
     radioClass: 'iradio_flat-red'
 });

 $('input.red').iCheck({
     checkboxClass: 'icheckbox_flat-red',
     radioClass: 'iradio_flat-red'
 });

 $('input.square').iCheck({
     checkboxClass: 'icheckbox_flat-square',
     radioClass: 'iradio_flat-square'
 });

 $('input.orange').iCheck({
     checkboxClass: 'icheckbox_flat-orange',
     radioClass: 'iradio_flat-orange'
 });

 $('input.red').iCheck({
     checkboxClass: 'icheckbox_flat-red',
     radioClass: 'iradio_flat-red'
 });

 $('input.green').iCheck({
     checkboxClass: 'icheckbox_flat-green',
     radioClass: 'iradio_flat-green'
 });

 $('input.yellow').iCheck({
     checkboxClass: 'icheckbox_flat-yellow',
     radioClass: 'iradio_flat-yellow'
 });

 $('input.pink').iCheck({
     checkboxClass: 'icheckbox_flat-pink',
     radioClass: 'iradio_flat-pink'
 });

 $('input.aero').iCheck({
     checkboxClass: 'icheckbox_flat-aero',
     radioClass: 'iradio_flat-aero'
 });

 $('input.purple').iCheck({
     checkboxClass: 'icheckbox_flat-purple',
     radioClass: 'iradio_flat-purple'
 });

 $('input.minimal').iCheck({
     checkboxClass: 'icheckbox_minimal',
     radioClass: 'iradio_minimal'
 });
$('input.square').iCheck({
    checkboxClass: 'icheckbox_square',
    radioClass: 'iradio_square',
  });