[JavaScript] ✅ 체크박스 모두 선택 시 버튼 활성화

⚒ 방법1. 개수 이용

👀 원리파악

1. checkbox를 누를 때 함수를 실행시킨다.

<input type="checkbox" name="check" class="check" onclick="getCheck()">

2. 함수 안에서 체크된 checkbox를 가져온다.

const selectedElements = document.querySelectorAll('input[class=check]:checked');

3. 개수를 세서 다 체크되었는지 파악한다.

const cnt = selectedElements.length;

4. 다 체크될때만 버튼이 활성화 되도록 해준다.

if(cnt == 5){
	$("버튼 선택자").css("background-color", "black");
	document.querySelector('.btn').disabled=false;

}else{
	$("버튼 선택자").css("background-color", "rgb(214,214,214)");
	document.querySelector('.btn').disabled=true;
}

🎃 필요한 개념

1. 이벤트리스너

   <방법1> 인라인 방식: 이벤트를 이벤트 대상의 태그 속성으로 지정

   <input type="checkbox" onclick="getCheck()" value="button" />

   <방법2> 프로퍼티 리스너 방식: 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식

   <script>
       DOM객체.onclick = function(){ getCheck()}
   </script>

   <방법3> 이벤트 객체: 비추천 -> 생략
   <방법4> addEventListener 방식: 제일 추천하는 방식 
   (하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록가능)

   <script>
       DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션)
   </script>

   참고: https://nevertrustbrutus.tistory.com/310

2. CSS 선택자
   참고: https://webty.tistory.com/60

3. [javascript] document 객체의 메소드
   참고: http://www.tcpschool.com/javascript/js_dom_document

4. Select Object Properties
   선택된객체.length : 객체 안 요소개수
   참고: https://www.w3schools.com/jsref/dom_obj_select.asp

5. jquery 문법
   참고: https://soft91.tistory.com/9

예제

<script>
        // 체크 개수 따라 구매계속 버튼 색 바뀌기
        function getCheck(){
            const query = 'input[class=check]:checked';
            const selectedElements = document.querySelectorAll(query);
            const cnt = selectedElements.length;
    
            if(cnt == 5){
                $("#next").css("background-color", "black");
                document.querySelector('.btn').disabled=false;
    
            }else{
                $("#next").css("background-color", "rgb(214,214,214)");
                document.querySelector('.btn').disabled=true;
            }
        }
    </script>

<input type="checkbox" name="check" class="check"
        onclick="getCheck()">
<input type="checkbox" name="check" class="check"
        onclick="getCheck()">
<input type="checkbox" name="check" class="check"
        onclick="getCheck()">
<a type="button" class="btn full solid disabled" id="next" disabled> 구매 계속 </a>

⛏ 방법2. And 조건문

++추후 작성 예정