Ç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.
Eline sağlık dostum yazdıkların ve yaptıkların gerçekten çok başarılı devamının gelmesi dileğiyle.
Hocam bu çalışmıyor. Bilginize…
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” 🙂
elinize sağlık
işe yaradı emeğine sağlık.