[JS30] -10) Hold Shift Check Checkboxes

KeyboardEvent.shiftKey

ShiftKeyを押すかどうかを判断する方法です.
最初は2つのclickイベントとshift keydownイベントをしていましたが、重なる部分が必要で悩んでいました.このAPIを使って、実現するのは本当に簡単です.

const $checkBoxesAll = document.querySelectorAll('input[type="checkbox"]');
const $inbox = document.querySelector('.inbox');

let toBeChecked = false;

$inbox.addEventListener('click', (ev) => {
  const target = ev.target;
  console.log(this)
  if (target.tagName !== 'INPUT') return;

  if (ev.shiftKey) {
    $checkBoxesAll.forEach((checkBox) => {
      if (checkBox.checked === true) {
        toBeChecked = !toBeChecked;
      }

      if (toBeChecked) {
        checkBox.checked = true;
      }
    });
  }
});

forEachを使用して、すべてのチェックボックス要素を巡回します.
クリックしたチェックボックスに従って、チェックするチェックボックスはtoBeChecked変数としてマークされ、toBeCheckedがtrueの場合は、すぐにcheckd=trueとしてマークされます.
shiftkeyを押しながらチェックボックスをクリックすると、toBeCheckedはfalseになります.
カリキュラムで、すべてのチェックボックスを選択し、クリックイベントを登録し、この値を与えます.

Reference

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey