JS30. Задание 10 Hold Shift and Check Checkboxes

Судя по тому, что вижу, задача изменить стиль отмеченных чекбоксом строк. Задача сложной не кажется.

Оказывается, всё не так. На самом деле зачеркнуть и выделить цветом отмеченные чекбоксом строки позволяет css-разметка

input:checked + p {
    background:#F9F9F9;
    text-decoration: line-through;
}

Java Script нужен, чтобы выполнить условие: "  Когда пользователь нажимает флажок, удерживает Shift, а затем нажимает на другой флажок несколькими строками ниже или выше, все флажки между этими двумя флажками должны быть отмечены."

Приступим.

1. Находим все чекбоксы. Так как они имеют разметку <input type="checkbox">, метод для их поиска будет таким:

var checkboxes = document.querySelectorAll('input[type="checkbox"]');

Здесь есть смысл обратить внимание на кавычки. Так как слово "checkbox" у нас в двойных кавычках, внешние кавычки должны быть одинарными.

Метод .querySelectorAll() возвращает объект NodeList. Чтобы перебрать все его элементы используем метод forEach()

checkboxes.forEach(checkbox => checkbox.addEventListener("click", function() {
    console.log("1");
}));

console.log("1"); используется только для проверки работает ли этот метод. По цифре в консоли видим, что да.

Осталось самое сложное: написать функцию, которая, если зажата клавиша Shift, будет отмечать все чекбоксы между двумя отмеченными.

Создаём переменную

var lastChecked;

Создаём функцию 

function handleCheck(event) {
    
}

Создаём переменную


var inBetween = false;

Проверяем два условия: 
1) что была зажата клавиша Shift

event.shiftKey

Свойство event.shiftKey позволяет узнать нажата клавиша Shift во время события.  
Есть аналогичные свойства  event.ctrlKey, event.altKey, которые отлавливают нажатие клавиш Ctrl и Alt. 


2) что был отмечен чекбокс 

this.checked

Условие полностью:

if (event.shiftKey && this.checked)

Если это условие выполняется...

Дальше будет немного сложно.

Итак, мы начали с того, что отметили один чекбокс (с зажатой клавишей Shift, или нет - без разницы). 
С этого момента он становится lastChecked, потому что ниже по коду мы указали:


lastChecked = this;

Дальше мы зажали клавишу  Shift (или она была зажата ещё раньше, не имеет значения) и нажали на ещё один чекбокс. То есть оба условия выполнены: Shift нажат, чекбокс отмечен.

Проходим по всем чекбоксам: 

checkboxes.forEach(checkbox =>

 И между lastChecked и  this.checked меняем значение переменной inBetween 
Она была false, между двумя зажатыми чекбоксами стала true, затем опять стала false:

if (checkbox === this || checkbox === lastChecked) {
                inBetween = !inBetween;

Осталась мелочь: пока  

inBetween == true, отметить чекбоксы галочками:


if (inBetween) {
                checkbox.checked = true;
            }

Код полностью:

var checkboxes = document.querySelectorAll('input[type="checkbox"]');

var lastChecked;

function handleCheck(event) {
    var inBetween = false;
    if (event.shiftKey && this.checked) {
        checkboxes.forEach(checkbox => {
            if (checkbox === this || checkbox === lastChecked) {
                inBetween = !inBetween;
            }

            if (inBetween) {
                checkbox.checked = true;
            }
        });
    }

    lastChecked = this;
}

checkboxes.forEach(checkbox => checkbox.addEventListener("click", handleCheck));