Checkbox Geçiş (Toggle Switch) Butonu

Checkbox Geçiş (Toggle Switch) Butonu
Checkbox Geçiş (Toggle Switch) Butonu
Bu yazımda genellikle toggle switch olarak geçen 2 şık arasında geçiş yapan checkbox buton yapımından bahsettim. Detaylar ve yapımı için yazımın devamını okuyabilirsiniz.

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.

[codepen_embed height=”331″ theme_id=”dark” slug_hash=”mdrodNO” default_tab=”html,result” user=”furkangiray_com”]See the Pen Checkbox Animasyonlu Geçiş (Toggle Switch) by furkangiray.com (@furkangiray_com) on CodePen.[/codepen_embed]

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 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Bu yazımda css 'de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsettim.
Devamını Oku

scroll-behavior Özelliği

Bu yazımda css 'de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsettim. Sitenize eklemek isterseniz yazımın devamını okuyabilirsiniz.

Devamını Oku