Стилизация Radio button и Checkboxes

Mon, 23 Jul 2012 10:34:50 +0000

Написал тут по быстрому скрипт стилизации radiobuttons и checkboxes на jquery для Drupal:

(function ($) {
    $(document).ready(function() {
        $('input[type="checkbox"]').each(function() {
            var self = $(this);
            self.hide();
            if (this.getAttribute('checked')) {
                self.after('');
            } else {
                self.after('');
            }
        })

        $('.checkbox-style').live('click', function(){
            var self = $(this);
            var id = this.getAttribute('data-id');
            if(self.hasClass('checked')) {
                self.removeClass('checked');
                $('#' + id).attr('checked', '');
            } else {
                self.addClass('checked');
                $('#' + id).attr('checked', 'checked');
            }
        })

        $('input[type="radio"]').each(function() {
            var self = $(this);
            self.hide();
            if (this.getAttribute('checked')) {
                self.after('');
            } else {
                self.after('');
            }
        })

        $('.radio-style').live('click', function(){
            var self = $(this);
            var id = this.getAttribute('data-id');
            var name = this.getAttribute('data-name');

            if(self.hasClass('checked')) {
                $('input[name="'+name+'"]').attr('checked', '');
                $('div[data-name="'+name+'"]').removeClass('checked');
                self.removeClass('checked');
                $('#' + id).attr('checked', '');
            } else {
                $('input[name="'+name+'"]').attr('checked', '');
                $('div[data-name="'+name+'"]').removeClass('checked');
                self.addClass('checked');
                $('#' + id).attr('checked', 'checked');
            }
        })
    });
})(jQuery);

Стили:

Checkboxes on Jeremy Jackson

Стилизация Radio button и Checkboxes