10 - Hold Shift and Check Checkboxes

반응형

개요

 

체크박스들이 있는데,

하나를 클릭하고, 쉬프트를 누른 채 나머지 하나를 클릭하면,

마지막으로 클릭했던 체크박스와 지금 쉬프트를 누른채 클릭한 체크박스 사이의

모든 체크박스가 체크 되도록 한다.

 

index-START.html

 

오랜만에 .css 와 div 레이아웃을 둘러보자.

 

	1) 전체 div 는 inbox class 이다. - max-width: 전체 폭이 450 px - margin: 상하좌우중에서 위쪽만 50px, 나머지는 자동설정 - box-shadow: 그림자의 x, y offset 과 blur (클 수록 블러커짐), 그리고 rgba 값   2) 각각의 체크박스 리스트는 .item 이다.   3) input:checked+p - input:checked 바로 뒤에 오는 p 이다. - 완료되었다는 느낌의 background 와 취소선을 넣어준다.

 

input-FINISHED.html

 

자바스크립트 부분은 스마트하다.   1) 모든 체크박스에 'click' 에 대한 이벤트 리스너를 달아준다.   2) 기본척으로 'click' 하면 checked 가 된다.   3) 그와는 별개로 handleCheck() 가 실행되는데 -  (만약) 이전의 click 으로 다른 곳에 checked box 가 있다면 -  지금 click 과의 사이의 모든 checkbox.checked 를 true 로 만들어준다.

 

 

 

반응형

저작자표시비영리변경금지

• 카카오스토리
• 트위터
• 페이스북

'javascript30' 카테고리의 다른 글

12 - Key Sequence Detection  (0)	2019.03.15
11 - Custom Video Player  (0)	2019.03.14
10 - Hold Shift and Check Checkboxes  (0)	2019.03.12
09 - Dev Tools Domination  (0)	2019.03.11
08 - Fun with HTML5 Canvas  (0)	2019.03.11
07 - Array Cardio Day 2  (0)	2019.03.09