Kategoriler

jQuery ile Basit Checkbox ve Radio Özelleştirmesi

5 yorum

Ç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.

Yorumlar (5)

fatma koçman demiş ki;

işe yaradı emeğine sağlık.

Bera Ramazan demiş ki;

elinize sağlık

Tayfun Erbilen demiş ki;

demoyu görmüyorsunuz o zaman siz? çalışan şeye nasıl çalışmıyor dediniz anlamadım. aslında şöyle demeliydiniz."hocam bunu çalıştıramadım" :)

Ahmet Ergin demiş ki;

Hocam bu çalışmıyor. Bilginize...

Fpinndir demiş ki;

Eline sağlık dostum yazdıkların ve yaptıkların gerçekten çok başarılı devamının gelmesi dileğiyle.

Yorum Gönder