JQuery ile Checkbox Stilini Değiştirin…
Bir iş için hazırladığım bu kısa JavaScript ile formlardaki checkbox elemanlarının stilini imaj olarak hazırladığınız seçili/seçilmemiş grafikleriyle değiştirebilir, ama aynı zamanda standartlarla uyumluluğu korumuş olurusunuz.
Not: images/ klasörü altına true ve false.png isminde iki dosya kaydetmeniz gerekmekte. Ayrıca dilerseniz checkbox’lar ile ardından gelecek içerik arasına
-
.fake_checkboxes{
-
padding-right:5px;
-
}
CSS tanımlaması ile biraz boşluk bırakılmasını sağlayabilirsiniz.
-
$(document).ready( function() {
-
$('input:checkbox').before('<img class="fake_checkboxes" src="images/false.png" />');
-
$('input:checkbox').css('display', 'none');
-
$('img.fake_checkboxes').click( function(){
-
if( $(this).attr('src') == 'images/false.png' ){
-
$(this).attr('src', 'images/true.png');
-
$(this).siblings('input:checkbox').val('on');
-
}else{
-
$(this).attr('src', 'images/false.png');
-
$(this).siblings('input:checkbox').val('');
-
}
-
});
-
});
