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>