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

published 23 July 2012

Написал тут по быстрому скрипт стилизации 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 style**/

.checkbox-style {
    display: inline-block;
    *display: inline;
    zoom:1;
    width: 22px;
    height: 22px;
    background: url('img/checkbox.png') no-repeat bottom left;
}
.checkbox-style.checked {
    background: url('img/checkbox-checked.png') no-repeat bottom left;
}
.radio-style {
    display: inline-block;
    *display: inline;
    zoom:1;
    width: 22px;
    height: 22px;
    background: url('img/radio.png') no-repeat center left;
}
.radio-style.checked {
    background: url('img/radio-checked.png') no-repeat center left;
}

Картинки: