Написав плагин для стилизации чекбоксов/радиобаттонов столкнулся с проблемой некорректной работы плагина. Плагин нормально отрабатывает только через один элемент, причем те элементы которые некорректно работают он отрабатывает тоже, только не вешает все нужные события.
Вот демо страница с формой: http://pastehtml.com/view/awf4co19w.html
Вот код самого плагина:
jQuery.fn.beautyCheckbox = function(){
return this.each(function(){
var checkbox = $(this).filter('[type=checkbox]'); //отсеиваем из всех элементов только чекбоксы
checkbox.css('display','none');//прячем стандартные чекбоксы
$('<div class="checkboxImitation"></div>').insertBefore(checkbox);//создаем див, который будет имитировать их работу
var checkboxImitation = $('div.checkboxImitation');
checkboxImitation.addClass('unchecked').hover( //присваиваем класс "не отмеченный" и вешаем события
function(){
if($(this).hasClass('checked')){$(this).addClass('checkedHover')}//проверяем в каком состоянии находится элемент и в соответсвии с этим производим манипуляции
else($(this).addClass('uncheckedHover'))
},
function(){
if($(this).hasClass('checked')){$(this).removeClass('checkedHover')}
else($(this).removeClass('uncheckedHover')) }
).click(function(){// вешаем событие, которое будет указывать спрятанным чекбоксам их состояние
if($(this).hasClass('checked')){$(this).removeClass().addClass('checkboxImitation unchecked uncheckedHover');
$(this).next('input:checkbox').attr('checked',true);
}
else{$(this).removeClass().addClass('checkboxImitation checked checkedHover');
$(this).next('input:checkbox').attr('checked',false);
}
});
});
}
Буду рад любой помощи и советам.