jQuery ile Basit Checkbox ve Radio Özelleştirmesi

Çok basit şekilde checkbox ve radio inputlarını özelleştirebilirsiniz. İlk olarak radio ve checkbox için html yapılarına göz atalım;

<label>
    <input type="radio" name="cinsiyet" checked />
    Kadın
</label>
<label>
    <input type="radio" name="cinsiyet" />
    Erkek
</label>

Bu radio inputu içindi. Gördüğünüz gibi label kullanıyoruz. Sebebi ise labele tıklandığında otomatik olarak radio butonunu kendisi seçeceği için jquery’de ekstra bir şey yapmamıza gerek kalmıyor. Aynı şekilde checkbox içinse yapı şöyle;

<label>
    <input type="checkbox" value="1" name="test" checked />
    Kullanım Koşulları'nı okudum, kabul ediyorum.
</label>

Şimdi jquery kodlarımızda ilk olarak :radio ve :checkbox seçicilerini kullanarak bir döngüye sokacağız. Eğer checked olan inputlar var ise bunların kapsayıcı nesnesine yani labellere checked classı atayacağız.

$(':radio, :checkbox').each(function(){
    $(this).after('<span></span>');
    if ( $(this).is(':checked') ){
        $(this).parent().addClass('checked');
    }
});

Evet şimdi label’e tıklandığında radio ise farklı checkbox ise farklı işlemler yapalım.
Radio inputu ise, onun name’ini alıp diğer radioların labellerindeki classı kaldırıp tıklanana checked classı atayacağız.
Eğer checkbox inputu ise, :checked ile seçili olup olmadığını anlayıp ona göre checked classını ekleyip kaldıracağız.

$('label').on('click', function(e){

    // radio
    if ( $(':radio', this).length ){
        var name = $(':radio', this).attr('name');
        $('input[name=' + name + ']').parent().removeClass('checked');
        $(this).addClass('checked');
    }

    // checkbox
    if ( $(':checkbox', this).length ){
        if ( $(':checkbox', this).is(':checked') ){
            $(this).addClass('checked');
        } else {
            $(this).removeClass('checked');
        }
    }

});

Artık geriye sadece css’den düzenleme yapmak kalıyor.
Örneğin şöyle bir düzenleme yapabilirsiniz;

label {
  cursor: pointer;
}
label input {
  position: absolute;
  opacity: 0;
}
label span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ddd;
  margin-right: 3px;
}
label.checked {
  color: green;
}
label.checked span {
  background: green;
}

Demo

See the Pen jhEHq by Tayfun Erbilen (@tayfunerbilen) on CodePen.