$(document).ready( function () { // Custom checkboxes //Custom checkboxes plugin /*-------------------------------------------------------------------- * Article: http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/ --------------------------------------------------------------------*/ jQuery.fn.customInput = function () { $(this).each(function (i) { if ($(this).is('[type=checkbox],[type=radio]')) { var input = $(this); var label = $('label[for=' + input.attr('id') + ']'); var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio'; $('
').insertBefore(input).append(input, label); var allInputs = $('input[name=' + input.attr('name') + ']'); label.hover( function () { $(this).addClass('hover'); if (inputType == 'checkbox' && input.is(':checked')) { $(this).addClass('checkedHover'); } }, function () { $(this).removeClass('hover checkedHover'); } ); input.bind('updateState', function () { if (input.is(':checked')) { if (input.is(':radio')) { allInputs.each(function () { $('label[for=' + $(this).attr('id') + ']').removeClass('checked'); }); }; label.addClass('checked'); } else { label.removeClass('checked checkedHover checkedFocus'); } }) .trigger('updateState') .click(function () { $(this).trigger('updateState'); }) .focus(function () { label.addClass('focus'); if (inputType == 'checkbox' && input.is(':checked')) { $(this).addClass('checkedFocus'); } }) .blur(function () { label.removeClass('focus checkedFocus'); }); } }); }; //End });