супер гибкий плагин для создания чекбоксов и радио кнопок

iCheck

Особенности плагина

Демо

Добавить состояние checked на 1 и 3 поле показать код
$('#input-1, #input-3').iCheck('check');
Убрать состояние checked с 1 и 3 поля показать код
$('#input-1, #input-3').iCheck('uncheck');
Добавить состояние disabled на 2 и 4 поле показать код
$('#input-2, #input-4').iCheck('disable');
Убрать состояние disabled с 2 и 4 поля показать код
$('#input-2, #input-4').iCheck('enable');
Отключить iCheck показать код
$('input').iCheck('destroy');

Лог

    Скины

    Скин "Minimal"

    Представление

    Цветовые схемы

    Состояния

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    Демо
    • Выберите цветовую схему из 10 возможных:
      • Black — minimal.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
    • Скопируйте папку /skins/minimal/ и файл /js/jquery.icheck.js в ваш проект.
    • Перед закрытием </head> подключите файлы (замените маркеры your-path и color-scheme):

      <link href="your-path/minimal/color-scheme.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      

      Пример использования цветовой схемы Red:

      <link href="your-path/minimal/red.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    • Добавьте чекбоксы или радио кнопки:

      <input type="checkbox">
      <input type="checkbox" checked>
      <input type="radio">
      <input type="radio" checked>
      
    • Добавьте JavaScript для запуска плагина iCheck:

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_minimal',
          radioClass: 'iradio_minimal',
          increaseArea: '20%' // не обязательно
        });
      });
      </script>
      

      Указываем, какую цветовую схему использовать (к примеру, Red):

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_minimal-red',
          radioClass: 'iradio_minimal-red',
          increaseArea: '20%' // не обязательно
        });
      });
      </script>
      
    • Всё.
    Код

    Скин "Square"

    Представление

    Цветовые схемы

    Состояния

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    Демо
    • Выберите цветовую схему из 10 возможных:
      • Black — square.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
    • Скопируйте папку /skins/square/ и файл /js/jquery.icheck.js в ваш проект.
    • Перед закрытием </head> подключите файлы (замените маркеры your-path и color-scheme):

      <link href="your-path/square/color-scheme.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      

      Пример использования цветовой схемы Red:

      <link href="your-path/square/red.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    • Добавьте чекбоксы или радио кнопки:

      <input type="checkbox">
      <input type="checkbox" checked>
      <input type="radio">
      <input type="radio" checked>
      
    • Добавьте JavaScript для запуска плагина iCheck:

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_square',
          radioClass: 'iradio_square',
          increaseArea: '20%' // не обязательно
        });
      });
      </script>
      

      Указываем, какую цветовую схему использовать (к примеру, Red):

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_square-red',
          radioClass: 'iradio_square-red',
          increaseArea: '20%' // не обязательно
        });
      });
      </script>
      
    • Всё.
    Код

    Скин "Flat"

    Представление

    Цветовые схемы

    Состояния

    • Normal
    • Checked
    • Disabled
    • Disabled & checked
    Демо
    • Выберите цветовую схему из 10 возможных:
      • Black — square.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
    • Скопируйте папку /skins/flat/ и файл /js/jquery.icheck.js в ваш проект.
    • Перед закрытием </head> подключите файлы (замените маркеры your-path и color-scheme):

      <link href="your-path/flat/color-scheme.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      

      Пример использования цветовой схемы Red:

      <link href="your-path/flat/red.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    • Добавьте чекбоксы или радио кнопки:

      <input type="checkbox">
      <input type="checkbox" checked>
      <input type="radio">
      <input type="radio" checked>
      
    • Добавьте JavaScript для запуска плагина iCheck:

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_flat',
          radioClass: 'iradio_flat'
        });
      });
      </script>
      

      Указываем, какую цветовую схему использовать (к примеру, Red):

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_flat-red',
          radioClass: 'iradio_flat-red'
        });
      });
      </script>
      
    • Всё.
    Код

    Скин "Line"

    Представление

    Цветовые схемы

    Состояния

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    Демо
    • Выберите цветовую схему из 10 возможных:
      • Black — line.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
    • Скопируйте папку /skins/line/ и файл /js/jquery.icheck.js в ваш проект.
    • Перед закрытием </head> подключите файлы (замените маркеры your-path и color-scheme):

      <link href="your-path/line/color-scheme.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      

      Пример использования цветовой схемы Red:

      <link href="your-path/line/red.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    • Добавьте чекбоксы или радио кнопки:

      <input type="checkbox">
      <label>Checkbox 1</label>
      
      <input type="checkbox" checked>
      <label>Checkbox 2</label>
      
      <input type="radio">
      <label>Radio button 1</label>
      
      <input type="radio" checked>
      <label>Radio button 2</label>
      
    • Добавьте JavaScript для запуска плагина iCheck:

      <script>
      $(document).ready(function(){
        $('input').each(function(){
          var self = $(this),
            label = self.next(),
            label_text = label.text();
      
          label.remove();
          self.iCheck({
            checkboxClass: 'icheck_line',
            radioClass: 'icheck_line',
            insert: '<div class="icheck_line-icon"></div>' + label_text
          });
        });
      });
      </script>
      

      Указываем, какую цветовую схему использовать (к примеру, Red):

      <script>
      $(document).ready(function(){
        $('input').each(function(){
          var self = $(this),
            label = self.next(),
            label_text = label.text();
      
          label.remove();
          self.iCheck({
            checkboxClass: 'icheck_line-red',
            radioClass: 'icheck_line-red',
            insert: '<div class="icheck_line-icon"></div>' + label_text
          });
        });
      });
      </script>
      
    • Всё.
    Код

    Скин "Polaris"

    Представление

    Состояния

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    Демо
    • Скопируйте папку /skins/polaris/ и файл /js/jquery.icheck.js в ваш проект.
    • Перед закрытием </head> подключите файлы (замените маркеры your-path и color-scheme):

      <link href="your-path/polaris/polaris.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    • Добавьте чекбоксы или радио кнопки:

      <input type="checkbox">
      <input type="checkbox" checked>
      <input type="radio">
      <input type="radio" checked>
      
    • Добавьте JavaScript для запуска плагина iCheck:

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_polaris',
          radioClass: 'iradio_polaris',
          increaseArea: '-10' // не обязательно
        });
      });
      </script>
      
    • Всё.
    Код

    Скин "Futurico"

    Представление

    States

    • Normal
    • Checked
    • Disabled
    • Disabled & checked
    Демо
    • Скопируйте папку /skins/futurico/ и файл /js/jquery.icheck.js в ваш проект.
    • Перед закрытием </head> подключите файлы (замените маркеры your-path и color-scheme):

      <link href="your-path/futurico/futurico.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    • Добавьте чекбоксы или радио кнопки:

      <input type="checkbox">
      <input type="checkbox" checked>
      <input type="radio">
      <input type="radio" checked>
      
    • Добавьте JavaScript для запуска плагина iCheck:

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_futurico',
          radioClass: 'iradio_futurico',
          increaseArea: '20%' // optional
        });
      });
      </script>
      
    • Всё.
    Код

    Простота использования

    iCheck очень прост в использовании.
    Он помещает каждый элемент чекбокса или радио кнопки в div, который вы можете настроить и оформить сами или воспользоваться одним из доступных скинов.
    Также вы можете добавить в div любой HTML код с помощью опции insert.

    HTML:

    <input type="checkbox" checked>
    <input type="radio" name="some" checked>
    <input type="radio" name="some">
    

    Отображение при стандартной конфигурации:

    <div class="icheckbox">
      <input type="checkbox" checked>
    </div>
    <div class="iradio">
      <input type="radio" name="some" checked>
    </div>
    <div class="iradio">
      <input type="radio" name="some">
    </div>
    

    По умолчанию, iCheck не применяет CSS к div-ам (если вы не используете скины).

    Настройки

    Настройки по умолчанию:

    {
      // 'checkbox' или 'radio' для стилизации только радио кнопок или чекбоксов. Если значение не указано, преобразует и те, и другие
      handle: '',
    
      // класс, добавляемый чекбоксам
      checkboxClass: 'icheckbox',
    
      // класс, добавляемый радио кнопкам
      radioClass: 'iradio',
    
      // класс, добавляемый при состоянии checked
      checkedClass: 'checked',
    
      // класс, добавляемый при состоянии disabled
      disabledClass: 'disabled',
    
      // класс, добавляемый при состоянии hover
      hoverClass: 'hover',
    
      // класс, добавляемый при состоянии focus
      focusClass: 'focus',
    
      // класс, добавляемый при состоянии active
      activeClass: 'active',
    
      // добавляет hoverClass к полю, при наведении мыши на лэйбл
      labelHover: true,
    
      // класс добавляется к лэйблу, если labelHover присвоен true
      labelHoverClass: 'hover',
    
      // увеличить кликабильную зону %
      increaseArea: '',
    
      // true меняет вид курсора при наведении мыши
      cursor: false,
    
      // true для наследования классов элемента
      inheritClass: false,
    
      // если true, id полей будет начинаться с префикса "icheck-"
      inheritID: false,
    
      // добавить HTML код в code or text inside customized input
      insert: ''
    }
    

    Вы можете назначать любые классы и стили.

    Инициализация

    iCheck применяется для преобразования чекбоксов и радио кнопок:

    // оформить все найденые чекбоксы и радио кнопки
    $('input').iCheck();
    
    // преобразует все поля в html элементах с классом block $('.block')
    $('.block input').iCheck();
    
    // преобразует только чекбоксы в html элементах с классом test $('.test')
    $('.test input').iCheck({
      handle: 'checkbox'
    });
    
    // преобразует все поля в html элементах с классом vote
    $('.vote').iCheck();
    
    // вы можете задать некоторые настройки после того, как применили плагин
    $('input.some').iCheck({
      // разные опции
    });
    

    Для работы плагина вам необходимо подключить jQuery v1.6 или новее, а также jquery.icheck.js (сжатыйjquery.icheck.min.js).

    Функции обратного вызова

    Название функции обратного вызова Когда вызывается
    is.Clicked пользователь кликнул на поле или на лэйбл
    is.Changed поле с состоянием checked или disabled было изменено
    is.Checked полю присвоено состояние checked
    is.Unchecked состояние checked удалено
    is.Disabled полю присвоено состояние disabled
    is.Enabled состояние disabled удалено
    is.Created поле только что было настроено
    is.Destroyed настройка была удалена

    Используйте метод bind для работы с функциями:

    $('input').bind('is.Clicked', function(){
      console.log('поле было выделено');
    });
    

    Функцию обратного вызова is.Created следует использовать перед инициализацией плагина.

    Методы

    $('input').iCheck('check'); — изменение состояния на checked

    $('input').iCheck('uncheck'); — убрать выделение checked

    $('input').iCheck('disable'); — изменение состояния на disabled

    $('input').iCheck('enable'); — удалить состояние disabled

    $('input').iCheck('update'); — применить изменения, сделанные вне плагина

    $('input').iCheck('destroy'); — удалить iCheck

    Поддержка браузеров

    Работа iCheck была протестирована на Internet Explorer 7+ (работает и на IE6, если не использовать цепочки классов), Firefox 2+, Google Chrome, Safari 3+ и Opera 9+.

    Мобильные браузеры (такие как Opera mini, Chrome mobile, Safari mobile и другие) также поддержиывают работу с плагином. Проверено на устройствах iOS, Android, BlackBerry и Windows Phone.