Merhabalar,
Bu yazımda genellikle toggle switch olarak geçen 2 şık arasında geçiş yapan checkbox buton yapımından bahsedeceğim. Genellikle formlar üzerinde;
- Evet/Hayır
- Aktif/Pasif
- Açık/Kapalı
gibi sadece 2 seçenek olduğunda kullanılır. Oldukça kullanışlıdır. Normalde bunu sadece Html, Css kullanarak yapabiliriz. Önemli olan butona her tıklayıp diğer şıka geçtiğinde checkbox değerini değiştirmek. Bunun için ise Jquery kullanacağız.
Dediğim gibi Html ve Css ile bu işin tasarım kısmını halledebiliyorsunuz. Hazır bir tasarım oldukça kolay bulabilirsiniz. Ben örnek olarak aşağıya bırakayım.
Yukarıda göreceğiniz gibi basit animasyonlu bir toggle switch butonu bulunuyor. Animasyon kısmı, ikon değişimi ve basılınca genişleme bölümleri Css ile yapılmıştır. Kodları Css sekmesinden inceleyebilirsiniz. Bizi ilgilendiren kısım ise tabii ki Jquery ile tıklanınca checkbox value değerini değiştirmek olacak. Bu sayede form’a evet/hayır özelliğinden hangisi seçili kaldıysa onu gönderebileceğiz.
Böyle bir durumda Jquery kodumuz şu şekilde olacaktır;
$(document).ready(function(){
// Sayfa hazır olduğunda
var deger = "Evet";
// deger değişkeni oluştur ve varsayılan değer olarak "Evet" ata
$("#sec").on('change', function() {
// sec id'li element üzerinde değişme yakala
if ($(this).is(':checked')) {
// eğer tıklanıp seçilmişse
deger ="Hayır";
// deger değişkeninin değerini "Hayır" olarak güncelle
$(this).val(deger);
// ve bunu Checkbox değerinde de değiştir.
}
else {
// eğer seçilmemişse veya tekrardan tıklanmışsa
deger = "Evet";
// değer değişkeninin değerini "Evet" olarak güncelle
$(this).val(deger);
// ve bunu da Checkbox üzerinde değerini değiştir.
}
});
});Yukarıdaki Jquery kodu ✔️ ve ❌ arasında geçiş yaparken Checkbox öğesininde value (değer) değişikliğini sağlıyor. Bu sayede form’a veya veritabanına veri gönderirken kullanıcının seçimini anlık olarak değiştiriyor.
Oldukça kullanışlı olduğunu düşünüyorum projelerinizde yer verebilirsiniz.
Mutlu Kodlamalar 🙂
