체크박스컨트롤하기 : 전체 체크/전체 체크해제

회원 가입 시 우리는 동의를 얻어야 할 때가 있습니다.

이때 체크박스가 많아지면 전체 동의 를 체크하게되면 하위 체크항목들이 모두 체크되는 기능도 쉽게 접합니다.

하지만 처음 웹개발을 할때는 만만치 않습니다.

이번엔 

체크박스가 체크가 되었을 때, 다른 체크박스도 제어할 수 있는 기능을 구현해 보겠습니다.

 

			<div class="form-check">
                            <input class="form-check-input" type="checkbox" value="all" id="signUpModal_consetrate_all" onClick="selectAll(this)" name="signUpCheckBox">
                            <label class="form-check-label" for="flexCheckDefault"> 전체 동의 </label>
                        </div>
                        <div class="alert alert-warning" role="alert">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="accept1" name="signUpCheckBox" id="signUpcheckBox1">
                                <label class="form-check-label" for="flexCheckDefault">약관에 동의합니다. </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="accept2" name="signUpCheckBox" id="signUpcheckBox2">
                                <label class="form-check-label" for="flexCheckDefault">약관에 동의합니다. </label>
                            </div>
                        </div>

해당 체크박스 div 태그입니다.

여기서 중요한것은  인풋태그입니다. 라벨태그는 그냥 글자를 눌렀을때도 체크가 되도록 하기위해서 놓은것입니다. 크게 신경안쓰셔두됩니다.

<input class="form-check-input" type="checkbox" value="all" id="signUpModal_consetrate_all" onClick="selectAll(this)" name="signUpCheckBox">

이것저것 태그를 많이 붙였지만 사실상 onClick부분이 제일 중요합니다.

클릭이 될때 해당 함수를 호출한다는 의미입니다.

function selectAll(all){
    const checkAll = document.getElementsByName('signUpCheckBox');
    checkAll.forEach((checkbox) => {
        checkbox.checked = all.checked;        
    });
}

해당 기능을 이용하는 함수입니다.

천천히 설명드리겠습니다.

onClick= "selectAll(this)"

태그를 통해서 해당 함수를 호출합니다. 이때 this는 해당 컴포넌트 즉 전체체크박스의 성질을 모두 매개변수로 넘깁니다.

해당 함수에서의

    const checkAll = document.getElementsByName('signUpCheckBox');

는 getElementsByName('이름'); 을 통해 해당 문서내의 수많은 이름을 가진 객체중 저 값의 이름을 가진 것을 checkAll이라고 한다고 정의했습니다.

개발자모드를 통해 확인해보겠습니다.

개발자 모드를 켜주고

그랬더니 3개의 해당 이름을 가진 노드들이 나옵니다.

그래서 checkAll이라는 객체에는 해당 이름을가진 노드들의 값들이 저장됩니다.

    checkAll.forEach((checkbox) => {
        checkbox.checked = all.checked;        
    });​

이 부분은 checkAll 이라는 객체의 포이치 한국어로 각각

즉 노드0~노드2 까지 모두 checked값을 변경해주는 것입니다.