jquery → Стилизация Radio button и Checkboxes
Написал тут по быстрому скрипт стилизации 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;
}
Картинки: