2021.03.23

Javascript 30 challenge day10

 

Multiple checkboxes with shift key

 

Event.shiftKey
event가 shiftkey가 눌린 채로 실행됐는지 boolean형식으로 나타낸다.

Shiftkey로 여러 개를 체크하고 싶은 경우

 

let lastChecked;
 
 
function handleCheck(event) {
  // check if they had the shift key down
  // AND check that they are checking in
  let inBetween = false;
  if (event.shiftKey && this.checked) {
    // go ahead and do what we please
    // loop over every single checkbox
    checkboxes.forEach(checkbox => {
      console.log(checkbox);
      if (checkbox === this || checkbox === lastChecked) {
        inBetween = !inBetween;
      }
      if (inBetween) {
        checkbox.checked = true;
      }
    })
  }
  lastChecked = this;
}

 

lastCheckde 생성, inBetween = false로 초기화한다.

1.     체크한 target을 lastChecked 에 저장한다.

2.     Shiftkey와 함께 클릭됐는지 확인한다.

3.     모든 체크박스를 forEach로 돌아가며 확인한다.

4.     현재 체크했거나, lastCheck이면 inBetween = !inBetween;
inBetween === true이면 checkbox.checked = true;로 바꿔준다

 

3번의 장점
체크박스의 위치를 확인할 필요가 없다.(몇 번째 child인지 확인하려했음)

4번의 장점
위에 있는 체크박스부터 클릭하지 않아도 상관없다.