Это скорее ответ чем вопрос.
Для Joomla 3.
Добавим плагин iCheck к шаблону (template/ваш_шаблон/index.php) в самый верх страницы:
<?php defined('_JEXEC') or die;
$doc = JFactory::getDocument();
$doc->addScript('templates/' . $this->template . '/js/icheck.min.js');
$doc->addScript('templates/' . $this->template . '/js/template.js');
...тут остальные функции...
?>
в файл template.js, который лежит в папке указанной выше в коде, пишем:
(function($)
{
$(document).ready(function()
{
//тут могут быть и другие функции
$('input[type="checkbox"]').addClass('ваш_добавочный_класс');
$('input[type="checkbox"]').iCheck({
checkboxClass: 'ваш_добавочный_класс'',
radioClass: 'тут_может_может_быть_другой_класс_для_radio',
increaseArea: '20%' // optional
});
})
})(jQuery);
Так же не забудьте прописать css:
.ваш_добавочный_класс{
position:relative;
display:inline-block;
vertical-align:middle;
margin:10px;
padding:0;
width:22px;
height:22px;
background:url(.../../../images/green.png) no-repeat;
background-position:0 0;
border:none;
cursor:pointer
}
.ваш_добавочный_класс.hover{
background-position:-24px 0
}
.ваш_добавочный_класс.checked{
background-position:-48px 0
}
Вот и все. Все должно работать как часы.
Более подробный материал:
тут и
тут