자바스크립트 - 전체 선택 체크박스를 클릭하면 모든 옵션이 체크하는 예제

안녕하세요

이번 시간에는 간단한 실습을 할까 합니다.

위 그림처럼 전체선택 체크박스를 누르면 아래의 세개의 체크박스가 동시에 체크되고

다시 한번 전체선택 체크박스를 누르면 세개의 체크 된것이 사라지는 예제입니다.

간단하니 이해하시기 쉬울겁니다.

var objAll=document.getElementById('allChk');
var ch1=document.getElementById('opt1');
var ch2=document.getElementById('opt2');
var ch3=document.getElementById('opt3');
objAll.onclick=function(){
 //전체 선택에 체크했다면 모든 체크박스를 체크
 if(this.checked){ // this란 체크박스(objAll)
  ch1.checked=true;
  ch2.checked=true;
  ch3.checked=true;
 }else{
  //아니면 모두 해제
  ch1.checked=false;
  ch2.checked=false;
  ch3.checked=false;
 }
}