checkbox 전체선택, 전체해제.... 한 페이지에 아이템이 여러개 있을 경우 / 여러페이지 일괄 적용 가능한 vanilla JS

javascript로만 checkbox를 전체선택하고 전체해제 하기.

1) 전체선택 체크시 > 해당 부모에 해당하는 자식 체크박스들 전체 선택
2) 전체선택 해제시 > 해당 부모에 해당하는 자식 체크박스들 전체 해제
3) 자식 체크박스 해제시 > 해당 부모의 '전체선택 체크박스' 해제

원문 소스 참조 : 기얏토님 블로그 "[javascript] 체크박스 전체 선택 및 제거 구현"
https://giyatto.tistory.com/51

[javascript] 체크박스 전체 선택 및 제거 구현

1. 한페이지에 하나만 있을 때엔 이렇게만 짜도 됩니다.

 

HTML

JS

 

 

2. 그러나 입력폼을 만들다 보면 한 페이지 안에 다른 항목들에 해당하는 체크박스 그룹을 여러개 만들어야 하는 경우가 있음. 그리고 한 홈페이지에서 단 한 페이지만, 하나의 체크박스를 사용할 일은 거의 없고 다른 페이지에서도 체크박스를 사용할텐데 그럴때마다 일일히 클래스나 아이디로 분류한다면? 똑같은 JS코드를 몇번이고 반복해야하고 html DOM도 지저분해짐. 그럴땐 다음과 같이 작성하면 됨.

this 와 parentElement를 이용

HTML

JS

 

소스

checkbox_seletAll.zip

0.00MB