В случае обнаружения багов или недочетов в плагинах, воспользуйтесь разделом Issues в репозитории на GitHub
Подключаем библиотеки:
CSS:
Не забываем про картинки скина:
Создаем чекбоксы и/или радио-батоны:
<input type="radio" name="reading" value="0" id="reading_0" /> <label for="reading_0">Очень люблю</label> <input type="radio" name="reading" value="1" id="reading_1" /> <label for="reading_1">Иногда читаю</label> <input type="radio" name="reading" value="2" id="reading_2" /> <label for="reading_2">Лучше фильм посмотрю</label> <input type="radio" name="reading" value="3" id="reading_3" /> <label for="reading_3">Ненавижу</label> или так: <label><input type="radio" name="movies" value="0" /> Обожаю</label> <label><input type="radio" name="movies" value="1" /> Не против</label> <label><input type="radio" name="movies" value="2" /> Так себе</label> <label><input type="radio" name="movies" value="3" /> Ненавижу</label> или вот еще чекбоксиков: <label><input type="checkbox" name="think" value="0" /> О работе</label> <label><input type="checkbox" name="think" value="1" checked /> Об отдыхе</label> <label><input type="checkbox" name="think" value="2" disabled checked /> О сексе</label> или используем правильную структуру (рекомендуется): <label class="icr-label"> <span class="icr-item type_radio"></span> <span class="icr-hidden"><input class="icr-input" type="radio" name="job" value="0" /></span> <span class="icr-text">Super good</span> </label> <label class="icr-label"> <span class="icr-item type_radio"></span> <span class="icr-hidden"><input class="icr-input" type="radio" name="job" value="1" disabled checked /></span> <span class="icr-text">Like it</span> </label>
Инициализируем плагин:
// все на странице: $("input[type='radio'], input[type='checkbox']").ionCheckRadio(); // конкретную группу: $(".my_inputs").ionCheckRadio();
Profit!