Merhabalar,

Bu yazımda genellikle toggle switch olarak geçen, iki şık arasında geçiş yapan checkbox buton yapımından bahsedeceğim. Genellikle formlarda:

• Evet / Hayır
• Aktif / Pasif
• Açık / Kapalı

gibi sadece iki seçenek olduğunda kullanılır ve oldukça kullanışlıdır.

Normalde bu yapıyı sadece HTML ve CSS ile oluşturabilirsiniz. Asıl mesele, her tıklamada checkbox'ın value (değer) kısmını değiştirmektir. Bu işlem için ise jQuery kullanacağız.

Tasarımı dilediğiniz şekilde hazırlayabilirsiniz. Aşağıda sadece jQuery ile değeri nasıl değiştireceğinizi gösteren kodu paylaşıyorum:

$(document).ready(function(){
  // Sayfa yüklendiğinde
  var deger = "Evet"; // Varsayılan değer

  $("#sec").on('change', function() {
    if ($(this).is(':checked')) {
      deger = "Hayır"; // Seçiliyse değer Hayır
      $(this).val(deger); // Checkbox değerini güncelle
    } else {
      deger = "Evet"; // Seçili değilse değer Evet
      $(this).val(deger); // Checkbox değerini güncelle
    }
  });
});

Bu jQuery kodu sayesinde kullanıcı ✔️ / ❌ arasında geçiş yaptığında checkbox öğesinin value değeri anlık olarak değişir. Bu da form verilerinin doğru şekilde gönderilmesini sağlar.

Oldukça pratik bir özellik, projelerinizde yer verebilirsiniz.

Mutlu Kodlamalar :)