Ç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 checkboxiç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(''); 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; }
Html de span ları koymamışsın hocam :). Paylaşım için teşekkürler