jQuery ile Radio ve Checkbox Resim Kullanma

Kullanıcı arayüzünü geliştirmek için form girişini özelleştirmek estetiklik ve cazibelik kazandıracaktır. Varsayılan kullanılan Radio ve Checkbox alanları kullanıcı arayüz deneyimi olarak iyi bir izlenim bırakmamaktadır artık. İyi bir izlenim bırakmak için bu alanları özelleştirmek etkili olacaktır. Bu durumda bizde, jQuery ile bu alanlarını hoş bir görünüme getireceğiz.

Radio ve Checkbox alanlarının özelleştirilmesi için CSS kullanılmaktadır. Farklı özellikler eklemek ve daha estetik kılmak için de jQuery’den de yararlanılabilir.

Bu eğitimde, radio ve checkbox alanlarının resimlerden nasıl oluşturulduğunu, CSS ve jQuery ile özelleştirmenin nasıl yapıldığından bahsedeceğim. Yapacağımız bu işlemi sağlayan bir çok eklenti de bulunmaktadır. Fakat eklenti kullanmak her zaman iyi sonuçlar vermediği için bu kodları kendimize göre ayarlamış olacağız. Hiç bir eklenti kullanmadan CSS ve jQuery kodlarıyla birlikte radio ve checkbox alanlarının resim ile değiştirilmesini sağlayacağız.

Aşağıda yer alan kodlarla birlikte, radio ve checkbox alanlarını yukarıda yer alan görseldeki hale getirmiş olacağız. Gerekli düzenlemelerle birlikte sisteminize bu görünümü uyarlayabilirsiniz.

Radio Butonu Düzenlemesi

<div class="col-md-2">
    <label class="image-radio">
        <img class="img-responsive" src="images/user.jpg" />
        <input type="radio" name="image_radio" value="1" />
        <i class="glyphicon glyphicon-ok hidden"></i>
    </label>
</div>
<div class="col-md-2">
    <label class="image-radio">
        <img class="img-responsive" src="images/user2.jpg" />
        <input type="radio" name="image_radio" value="2" />
        <i class="glyphicon glyphicon-ok hidden"></i>
    </label>
</div>
<div class="col-md-2">
    <label class="image-radio">
        <img class="img-responsive" src="images/user3.jpg" />
        <input type="radio" name="image_radio" value="3" />
        <i class="glyphicon glyphicon-ok hidden"></i>
    </label>
</div>
<div class="col-md-2">
    <label class="image-radio">
        <img class="img-responsive" src="images/user4.jpg" />
        <input type="radio" name="image_radio" value="4" />
        <i class="glyphicon glyphicon-ok hidden"></i>
    </label>
</div>
<div class="col-md-2">
    <label class="image-radio">
        <img class="img-responsive" src="images/user5.jpg" />
        <input type="radio" name="image_radio" value="5" />
        <i class="glyphicon glyphicon-ok hidden"></i>
    </label>
</div>


<script>
$(document).ready(function(){
    $(".image-radio").each(function(){
        if($(this).find('input[type="radio"]').first().attr("checked")){
            $(this).addClass('image-radio-checked');
        }else{
            $(this).removeClass('image-radio-checked');
        }
    });
    $(".image-radio").on("click", function(e){
        $(".image-radio").removeClass('image-radio-checked');
        $(this).addClass('image-radio-checked');
        var $radio = $(this).find('input[type="radio"]');
        $radio.prop("checked",!$radio.prop("checked"));

        e.preventDefault();
    });
});
</script>
<style>
    .image-radio {
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid transparent;
    margin-bottom: 0;
    outline: 0;
}
.image-radio input[type="radio"] {
    display: none;
}
.image-radio-checked {
    border-color: #4783B0;
}
.image-radio .glyphicon {
  position: absolute;
  color: #4A79A3;
  background-color: #fff;
  padding: 10px;
  top: 0;
  right: 0;
}
.image-radio-checked .glyphicon {
  display: block !important;
}
</style>

CheckBox Butonu Düzenlemesi

<div>
    <div class="col-md-2">
        <label class="image-checkbox">
            <img class="img-responsive" src="images/radio-image.jpeg" />
            <input type="checkbox" name="image_check[]" value="1" />
            <i class="glyphicon glyphicon-ok hidden"></i>
        </label>
    </div>
    <div class="col-md-2">
        <label class="image-checkbox">
            <img class="img-responsive" src="images/radio-image2.jpeg" />
            <input type="checkbox" name="image_check[]" value="2" />
            <i class="glyphicon glyphicon-ok hidden"></i>
        </label>
    </div>
    <div class="col-md-2">
        <label class="image-checkbox">
            <img class="img-responsive" src="images/radio-image3.jpeg" />
            <input type="checkbox" name="image_check[]" value="3" />
            <i class="glyphicon glyphicon-ok hidden"></i>
        </label>
    </div>
    <div class="col-md-2">
        <label class="image-checkbox">
            <img class="img-responsive" src="images/radio-image4.jpeg" />
            <input type="checkbox" name="image_check[]" value="4" />
            <i class="glyphicon glyphicon-ok hidden"></i>
        </label>
    </div>
    <div class="col-md-2">
        <label class="image-checkbox">
            <img class="img-responsive" src="images/radio-image5.jpeg" />
            <input type="checkbox" name="image_check[]" value="5" />
            <i class="glyphicon glyphicon-ok hidden"></i>
        </label>
    </div>
</div>

<script>
    // add/remove checked class
$(".image-checkbox").each(function(){
    if($(this).find('input[type="checkbox"]').first().attr("checked")){
        $(this).addClass('image-checkbox-checked');
    }else{
        $(this).removeClass('image-checkbox-checked');
    }
});

// sync the input state
$(".image-checkbox").on("click", function(e){
    $(this).toggleClass('image-checkbox-checked');
    var $checkbox = $(this).find('input[type="checkbox"]');
    $checkbox.prop("checked",!$checkbox.prop("checked"));
  
    e.preventDefault();
});
</script>

<style>
    .image-checkbox {
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid transparent;
    margin-bottom: 0;
    outline: 0;
}
.image-checkbox input[type="checkbox"] {
    display: none;
}
.image-checkbox-checked {
    border-color: #4783B0;
}
.image-checkbox .glyphicon {
  position: absolute;
  color: #4A79A3;
  background-color: #fff;
  padding: 10px;
  top: 0;
  right: 0;
}
.image-checkbox-checked .glyphicon {
  display: block !important;
}
</style>