Javascript 30 - Gün 10

28 Nisan 2023

Bugün Gmail vb sitelerden de alışık olduğumuz shift ile çoklu seçim özelliğini geliştirmemiz gerekiyor.

Projenin demosu : Demo

Başlangıç dosyalarını bulabileceğiniz repom: js-30 | github

Amaç

Örneğin birinci checkbox'ı işaretledik ve sonra Shift tuşuna basarak 5. checkbox'a tıklandığında 2.,3.,4 ve 5. checkbox'ların işaretlenmesini istiyoruz.

Çözümüm

<script>
// Tüm input elementlerini seçiyoruz.
// Burada spread operatör yardımıyla NodeList'i Array'e çevirdik çünkü bunu yapmasaydık findIndex metodunu kullanamazdık.
const allInputs = [...document.querySelectorAll(`input`)];
// İşaretlemeye başlayacağımız checkbox'un başlangıç değerini saklamak için değişken oluşturuyoruz.
let startingIndex;
function handleCheck(e) {
  // Son tıklanan checkbox'un indexini allInputs arrayinde buluyoruz.
  const currentIndex = allInputs.findIndex((input) => input === e.target);
 
  // Eğer shift tuşuna basılmamışsa yalnızca startingIndex değerini güncelliyoruz ve fonksiyondan çıkıyoruz.
  if (!e.shiftKey) {
    startingIndex = currentIndex;
    return;
  }
 
  // Eğer son tıklanan checkbox ilk tıklanandan sonraysa ilk tıklanandan başlayarak son tıklanana kadar tüm checkboxları işaretliyoruz.
  if (startingIndex < currentIndex) {
    allInputs.forEach((input, index) => {
      if (index < currentIndex && index > startingIndex) {
        input.checked = true;
      }
    });
  }
 
  // Eğer son tıklanan checkbox ilk tıklanandan önceyse son tıklanandan başlayarak ilk tıklanana kadar tüm checkbox'ları işaretliyoruz.
  else {
    allInputs.forEach((input, index) => {
      if (index > currentIndex && index < startingIndex) {
        input.checked = true;
      }
    });
  }
}
 
// Her input elementine bir tıklama olayı (click event) ekliyoruz ve tıklama işlemi handleCheck() fonksiyonunda yönetiliyor.
allInputs.forEach((input) => input.addEventListener("click", handleCheck));    
</script>

Bu sayfayı düzenle