[JavaScript]자바스크립트 체크 박스 선택,해제 시 버튼 활성화,비활성화(회원 가입,약관 동의) 예제 코드

📖 들어가며 

자바스크립트를 이용한 회원가입, 약관 동의 예제를 검색하면 jQuery를 이용한 예제가 많은데, 요즘에는 jQuery를 많이 사용하지 않는 추세이고, 순수 Vanilla 자바스크립트를 사용하며 공부하는 것이 매우 도움이 되기 때문에 jQuery 없이 순수 Vanilla 자바스크립트를 이용하여 예제를 만들어 보겠습니다.

완성 화면 

HTML 구성

<div class="wrap">
      <div class="logo">
        <h1>JUN</h1>
      </div>
      <div class="contents">
        <form action="/" method="POST" id="form__wrap">
          <div class="terms__check__all">
            <input type="checkbox" name="checkAll" id="checkAll"" />
            <label for="checkAll"
              >JUN 이용약관, 개인정보 수집 및 이용, 프로모션 정보 수신(선택)에<br />모두 동의합니다.</label
            >
          </div>
          <ul class="terms__list">
            <li class="terms__box">
              <div class="input__check">
                <input type="checkbox" name="agreement" id="termsOfService" value="termsOfService" required />
                <label for="termsOfService" class="required">JUN 이용약관 동의</label>
              </div>
              <div class="terms__content">
                여러분을 환영합니다. JUN 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 JUN
                서비스의 이용과 관련하여 JUN 서비스를 제공하는 JUN 주식회사(이하 ‘JUN’)와 이를 이용하는 JUN 서비스
                회원(이하 ‘회원’) 또는 비회원과의 관계를 설명하며, 아울러 여러분의 JUN 서비스 이용에 도움이 될 수 있는
                유익한 정보를 포함하고 있습니다. JUN 서비스를 이용하시거나 JUN 서비스 회원으로 가입하실 경우 여러분은 본
                약관 및 관련 운영 정책을 확인하거나 동의하게 되므로, 잠시 시간을 내시어 주의 깊게 살펴봐 주시기
                바랍니다.
              </div>
            </li>
            <li class="terms__box">
              <div class="input__check">
                <input type="checkbox" name="agreement" id="privacyPolicy" value="privacyPolicy" required />
                <label for="privacyPolicy" class="required">개인정보 수집 및 이용 동의</label>
              </div>
              <div class="terms__content">
                개인정보보호법에 따라 JUN에 회원가입 신청하시는 분께 수집하는 개인정보의 항목, 개인정보의 수집 및
                이용목적, 개인정보의 보유 및 이용기간, 동의 거부권 및 동의 거부 시 불이익에 관한 사항을 안내 드리오니
                자세히 읽은 후 동의하여 주시기 바랍니다.1. 수집하는 개인정보 이용자는 회원가입을 하지 않아도 정보 검색,
                뉴스 보기 등 대부분의 네이버 서비스를 회원과 동일하게 이용할 수 있습니다. 이용자가 메일, 캘린더, 카페,
                블로그 등과 같이 개인화 혹은 회원제 서비스를 이용하기 위해 회원가입을 할 경우, 네이버는 서비스 이용을
                위해 필요한 최소한의 개인정보를 수집합니다.
              </div>
            </li>
            <li class="terms__box">
              <div class="input__check">
                <input type="checkbox" name="agreement" id="allowPromotions" value="allowPromotions" />
                <label for="allowPromotions">프로모션 정보 수신 동의</label>
              </div>
              <div class="terms__content">
                JUN에서 제공하는 이벤트/혜택 등 다양한 정보를 휴대전화(JUN앱 알림 또는 문자), 이메일로 받아보실 수
                있습니다. 일부 서비스(별도 회원 체계로 운영하거나 JUN 가입 이후 추가 가입하여 이용하는 서비스 등)의
                경우, 개별 서비스에 대해 별도 수신 동의를 받을 수 있으며, 이때에도 수신 동의에 대해 별도로 안내하고
                동의를 받습니다.
              </div>
            </li>
          </ul>
          <button type="submit" class="next-button" disabled>확인</button>
        </form>
      </div>
    </div>

* 자바스크립트 코드에서 각각의 값을 확인해야 하기 때문에 각각의 체크박스에  id와 value를 주었습니다.

 

이 글의 목적은 자바스크립트로 예제를 완성하는 목적이기 때문에 CSS 스타일링은 굳이 작성하지 않을 것입니다.

 

이제 완성된 자바스크립트 코드를 하나하나 해석해가면서 정리를 할 것입니다.

 

이 자바스크립트 약관 동의 예제의 로직은

1. 모두 동의가 체크가 되면 모든 체크박스가 체크가 되고 해제되면 모두 해제가 되어야 함.

2. 필수 동의(2개)가 체크되어야 버튼이 활성화되고 하나라도 체크가 안되면 버튼은 비활성화.

3. 모두 동의를 체크하지 않고 밑에 3개의 체크박스로 일일이 체크했을 때 모두 동의 체크 박스가 활성화되어야 함.

4. 반대로 모두 체크되어있는 상태에서 체크박스 하나라도 해제가 되면 모두 동의 체크 박스가 해제되어야 함.

완성된 자바스크립트 코드

'use strict';

const form = document.querySelector('#form__wrap');
const checkAll = document.querySelector('.terms__check__all input');
const checkBoxes = document.querySelectorAll('.input__check input');
const submitButton = document.querySelector('button');

const agreements = {
  termsOfService: false,
  privacyPolicy: false,
  allowPromotions: false,
};

form.addEventListener('submit', (e) => e.preventDefault()); // 새로고침(submit) 되는 것 막음

checkBoxes.forEach((item) => item.addEventListener('input', toggleCheckbox));

function toggleCheckbox(e) {
  const { checked, id } = e.target;  
  agreements[id] = checked;
  this.parentNode.classList.toggle('active');
  checkAllStatus();
  toggleSubmitButton();
}

function checkAllStatus() {
  const { termsOfService, privacyPolicy, allowPromotions } = agreements;
  if (termsOfService && privacyPolicy && allowPromotions) {
    checkAll.checked = true;
  } else {
    checkAll.checked = false;
  }
}

function toggleSubmitButton() {
  const { termsOfService, privacyPolicy } = agreements;
  if (termsOfService && privacyPolicy) {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
}

checkAll.addEventListener('click', (e) => {
  const { checked } = e.target;
  if (checked) {
    checkBoxes.forEach((item) => {
      item.checked = true;
      agreements[item.id] = true;
      item.parentNode.classList.add('active');
    });
  } else {
    checkBoxes.forEach((item) => {
      item.checked = false;
      agreements[item.id] = false;
      item.parentNode.classList.remove('active');
    });
  }
  toggleSubmitButton();
});

1. DOM

우선 코드 상단에 DOM 요소들을 잡아주었습니다.

const form = document.querySelector('#form__wrap'); // 데이터를 전송하는 Form 
const checkAll = document.querySelector('.terms__check__all input'); // 모두 동의 체크박스
const checkBoxes = document.querySelectorAll('.input__check input'); // 모두 동의를 제외한 3개의 체크박스
const submitButton = document.querySelector('button'); // 확인 버튼

아까 위에서 말한 로직대로 

즉, 체크박스에 이벤트가 일어날 때마다 체크박스의 상태를 확인해서 변화를 시켜주어야 합니다.

 

그래서 체크되는 체크 박스들의 True & False 값으로 제어를 하며 상태를 확인할 것이기 때문에 아래와 같이 Object를 이용해 HTML에서 작성한 체크박스 각각의 id와 동일하게 작성한 후 Default 값을 주었습니다.

왜 이런식으로 작성했는지는 곧 알 수 있습니다.

 

(체크 박스의 체크 여부(true & false)를 저장하는 임시 저장 공간 이라고 생각하면 일단 이해가 쉬울 것입니다.)

const agreements = {
  termsOfService: false, // 첫번째 필수동의 체크박스
  privacyPolicy: false, // 두번째 필수동의 체크박스
  allowPromotions: false, // 이벤트 수신 동의 체크박스
};

2. 모두 동의 CheckBox

이제 해야 할것은 '모두 동의' 체크박스가 체크가 되면 모든 체크박스의  체크를 하고, '모두 동의' 체크박스가 해제되면 모든 체크 박스의 체크상태를 해제되게 해야 합니다.

 

그리고, 버튼도 활성화되어야 하는데 버튼이 활성화되는 조건은 '필수 동의'가 모두 체크되어야 활성화가 되어야 합니다.

 

간단하게 먼저 설명하면 '모두 동의' 체크박스를 체크 또는 해제하게 되면 모든 체크 박스들을 체크 또는 해제하고 그 체크 상태를 위에 작성한 Object에 보내주고 버튼을 활성화 또는 비활성화하는 함수를 실행합니다.

checkAll.addEventListener('click', (e) => {
  const { checked } = e.target;
  if (checked) {
    checkBoxes.forEach((item) => {
      item.checked = true;
      agreements[item.id] = true;
      item.parentNode.classList.add('active');
    });
  } else {
    checkBoxes.forEach((item) => {
      item.checked = false;
      agreements[item.id] = false;
      item.parentNode.classList.remove('active');
    });
  }
  toggleSubmitButton();
});

'모두 동의' 체크 박스에 click event가 발생하면 위와 같은 코드가 실행되게 작성하였습니다.

 

click을 하면 event가 발생하고, event가 발생하는 요소가 event의 target이 되는 것입니다.

즉, e.target은 '모두 동의' 체크박스 요소를 뜻합니다.

 

e.target의 부분이 이해가 안 가거나 더 알고 싶으면 아래의 링크를 참고해보면 좋을 것 같습니다.

developer.mozilla.org/ko/docs/Web/API/Event/target

Event.target - Web API | MDN

const { checked } = e.target;

그리고 위와 같이 ES6 문법인 구조 분해 할당으로 target의 checked 값을 가져오게 했는데

(CheckBox의 체크 상태를 확인할 수 있는 checked는 true(체크ㅇ) & false(체크 x ) 값을 반환합니다.)

const checked = e.target.checked;

이렇게 작성한 것과 같습니다.

이 부분이 이해가 안 가면 아래의 링크를 참고하면 좋을 것 같습니다.

yong-nyong.tistory.com/4

[JavaScript] 자바스크립트 구조 분해 할당(Destructuring) | ES6+

이제 '체크'가 되면 수행문을 실행해야 하니깐 아래와 같이 if문을 작성한 것입니다.

if (checked) {
    checkBoxes.forEach((item) => {
      item.checked = true;
      agreements[item.id] = true;
      item.parentNode.classList.add('active');
    });
  } else {
    checkBoxes.forEach((item) => {
      item.checked = false;
      agreements[item.id] = false;
      item.parentNode.classList.remove('active');
    });
  }

event target에서 받은 checked의 값이 True (체크) 면 forEach문을 통해 체크 박스 요소들을 하나씩 돌려서 수행을 합니다.

 

(forEach에 대해 알고 싶으면 아래의 링크 참고)

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN

 if (checked) {
    checkBoxes.forEach((item) => {
      item.checked = true;
      agreements[item.id] = true;
      item.parentNode.classList.add('active');
    });
  }

item(체크박스)의 checked를 true로 변경합니다. ( checked를 true를 주면 체크 박스는 체크가 됨.)

그다음 위에서 작성한 Object에서 체크박스의 id값과 동일하게 작성한 것을 볼 수 있을 것입니다.

 

여기서 item의 id값을 받아와서 Object에서 작성한 id값과 동일한 부분에 true 값을 넣어 주는 것입니다.

agreements[item.id] = true;

이렇게 넣어주는 이유는 if문을 수행한 후,

체크박스의 체크 여부(true & false)를 확인하고 버튼을 활성화할지 비활성화할지 정해야 하기 때문입니다.

 

이제 else 부분은 반대로 체크가 해제되면 반대로 체크박스 요소들을 forEach문을 돌려 체크를 해제하고 요소의 id의 Objcet 값들을 false로 보낸다고 이해하시면 됩니다.

else {
    checkBoxes.forEach((item) => {
      item.checked = false;
      agreements[item.id] = false;
      item.parentNode.classList.remove('active');
    });
  }
  toggleSubmitButton();

이제 if문이 끝나게 되면 바로 toggleSubmitButton(); 함수를 실행합니다.

반응형

3. 필수 동의 체크 여부에 대한 버튼 활성화 or 비활성화

이 함수는 '필수 동의' 체크 여부를 확인한 뒤 버튼을 활성화, 비활성화 동작을 하는 함수입니다.

function toggleSubmitButton() {
  const { termsOfService, privacyPolicy } = agreements;
  if (termsOfService && privacyPolicy) {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
}

위에서 작성한 agreements Object의 '필수 동의' 요소들의 값을 가져와 변수에 담습니다.

 const { termsOfService, privacyPolicy } = agreements;

이 '필수 동의' 체크 박스가 둘 다 true(체크) 이면 버튼의 disabled를 false로 바꾸어 버튼을 활성화시켜 줍니다.

if (termsOfService && privacyPolicy) {
    submitButton.disabled = false; // 버튼 활성화
  } else {
    submitButton.disabled = true; // 버튼 비활성화
  }

'모두 동의' 체크 부분에 대한 코드는 작성이 된 것입니다.

4. 3개의 체크 박스에 대한 이벤트

이제 나머지 3개의 체크 박스의 부분을 담당하는 코드를 살펴봅시다.

checkBoxes.forEach((item) => item.addEventListener('input', toggleCheckbox));

function toggleCheckbox(e) {
  const { checked, id } = e.target;  
  agreements[id] = checked;
  this.parentNode.classList.toggle('active');
  checkAllStatus();
  toggleSubmitButton();
}

 체크 박스에 input 이벤트가 발생할 때마다 toggledCheckbox(); 함수를 실행해 줍니다.

checkBoxes.forEach((item) => item.addEventListener('input', toggleCheckbox));

여기서 input 이벤트는 <input>, <select> 및 <textarea> 요소의 value 속성이 바뀔 때마다 발생합니다.

 

input 이벤트에 더 궁금하거나, input 이벤트와 change 이벤트에 대한 차이가 궁금하면 아래의 링크를 참고하면 좋을 것 같습니다.

developer.mozilla.org/ko/docs/Web/API/HTMLElement/input_event

HTMLElement: input event - Web API | MDN

toggleCheckbox 함수는 input 이벤트가 발생된 요소를 받아와 id와 checked(체크 상태) 값을 변수에 담고 agreements Object에 id값과 동일한 곳에 checked 값을 넣어준 다음에 checkAllStatus()를 실행하고 toggleSubmitButton() 함수를 실행합니다.

function toggleCheckbox(e) {
  const { checked, id } = e.target; 
  agreements[id] = checked;
  this.parentNode.classList.toggle('active'); // 여기선 중요하지 않음
  checkAllStatus();
  toggleSubmitButton();
}

checkAllStatus() 함수는 3개의 체크박스의 상태를 확인해서 '모두 동의' 체크 박스의 체크 여부를 정하는 함수입니다.

function checkAllStatus() {
  const { termsOfService, privacyPolicy, allowPromotions } = agreements;
  if (termsOfService && privacyPolicy && allowPromotions) {
    checkAll.checked = true;
  } else {
    checkAll.checked = false;
  }
}

 agreements Object의 요소들을 변수로 담고 

const { termsOfService, privacyPolicy, allowPromotions } = agreements;

3개의 체크 박스가 모두 체크 상태이면 '모두 동의' 체크 박스의 체크 상태를 true(체크)로 해주고 하니면 false(체크 해제)합니다.

if (termsOfService && privacyPolicy && allowPromotions) {
    checkAll.checked = true;
  } else {
    checkAll.checked = false;
  }

그리고, toggleSubmitButton(); 함수를 실행하게 됩니다.

(이 함수에 대해서는 위에서 설명함 (버튼 활성화, 비활성화 함수)

 

이로서 코드를 실행해 확인해 보면 생각한 대로 잘 작동하는 것을 볼 수 있을 것입니다.

📕 마무리

+ 많은 분들이 필요로 하시는 것 같아서 코드 예제도 코드 샌드박스 링크 첨부해 드리겠습니다!

(확인 결과 바로 접속해서 확인하면 제대로 작동하지 않는 것 같습니다. 링크 들어가셔서 샌드박스 내의 브라우저에서 새로고침 한번 해주시면 정상 작동 할 겁니다.)

codesandbox.io/s/agreement-l5uc6

Agreement - CodeSandbox

전체적인 코드를 보여준 후, 코드의 동작 원리, 순서, 로직에 대해서 설명을 하면서 Vanilla 자바스크립트를 이용해서 작성한  회원가입, 약관 동의 예제의 코드에 대한 정리는 끝났습니다.

 

 

(본 글은 유튜버 '김버그' 님의 예제를 활용, 참고하였습니다.)