Javascript [ Checkbox ]

Checkbox

• 동일한 이름을 가지는 체크박스 여러개 존재
• getElementById 가 아닌 getElementsByName 이용
• 태그의 id 를 꼭 지정할 필요 X
• 반드시 name 을 지정해야한다.

주요 속성

• name : 체크박스의 이름
• length : 동일한 이름의 체크박스의 개수
• checked : 체크박스의 체크여부
  체크 => true
  체크 X => false
• value : 체크박스의 값

---

함수선언

HTML 내에서 클릭 함수 선언
자기 자신 클릭시 발생하는 함수에 사용 가능

<input type="checkbox" name="이름", value = "값"
       							onclick="함수명(this)" />
<!-- this 는 체크박스 자기자신을 뜻한다. -->

---

1개만 선택 가능

1. HTML 에서 클릭 함수 선언

• .checked 는 체크박스가 체크된 상태

const checkbox_list = document.querySelectorAll("input[name=
                                                '이름']");

for(let checkbox of checkbox_list){
	if(checkbox != this){	// this : 체크한 현재 체크박스
    	checkbox.checked = false;	// 다른 체크박스 해제시키기
    }
}	// end of for~of-----------------

2. JS 에서 클릭 함수 선언

const checkbox_list = document.querySelectorAll("input[name=
                                                '이름']");
for(let checkbox of checkbox_list){
	checkbox.addEventListener('click', () => {
    // checkbox : 내가 클릭한 체크박스
    	for(let checkbox_product of checkbox_list){
        	if(checkbox != checkbox_product){	
            // 클릭한 체크박스와 체크박스리스트 요소들이 다른 경우
            	checkbox_product.checked = false;
            }
       	}
    })	// end of checkbox.addEventListener('click---------
}	// end of for(let checkbox of checkbox_list)------

---

전체선택 / 전체해제

1. HTML 에서 클릭 함수 선언

• 체크박스의 상태 true, false 로 구분짓기

if(this == false){	// 전체선택 버튼이 아래의 버튼
  document.querySelector("전체선택버튼위치").checked = false;
}
else{	// 전체선택 버튼이 아래의 버튼 클릭시
	const checkbox_list 
    = document.querySelectorAll("input[name = '이름']");
  	let is_all_checked = true;
  	for(let checkbox of checkbox_list){
    	if(!checkbox.checked){	
        	is_all_checked = false;
          	true;
        }
    }	// end of for~of-----------
	if(is_all_checked){
    	document.querySelector("전체선택버튼위치").checked
      = true;
    }
}	// end of if~else--------------

2. JS 에서 클릭 함수 선언

// ===== 전체선택 체크박스 클릭 ===== //
const allCheck = document.querySelector("전체선택위치");
allCheck.addEventListener('click', () => {
	const checkbox_list 
    = document.querySelectorAll("체크박스태그위치");
  
  	for(let checkbox of checkbox_list){
      	// 전체선택 유무에 따른 체크박스의 체크상태 변동
    	checkbox.checked = allCheck.checked;
    }	// end of for(let checkbox of checkbox_list)----
})	// end of allCheck.addEventListener('click'---------

// ===== 하위 체크박스에 따른 전체선택 체크박스 ===== //
const checkbox_list 
			= document.querySelectorAll("하위체크박스위치");
for(let checkbox of checkbox_list){
	checkbox.addEventListener('click', () => {
     	if(!checkbox.checked){	// 하위체크박스 해제한 경우
        	document.querySelector("전체선택위치").checked
          											= false;
        }
      	else{	// 하위체크박스에 체크한 경우
        	let is_check_all = true;
          	for(let sub_checkbox of checkbox_list{
            	if(!sub_checkbox.checked){
                  // 다른 체크박스의 체크여부 파악
                	is_check_all = false;
                  	break;
                }
            }	// end of 하위체크박스 체크유무 파악
      		if(is_all_checked){
    	document.querySelector("전체선택버튼위치").checked
      											= true;
    }
       }
    })	// end of checkbox.addEventListener('click'--------
}	// end of for(let checkbox of checkbox_list)--------

---

정리

• 12_checkbox
  -> 01_checkbox.html, 01.css, 01.js, 02_checkbox.html, 02.css, 02.js

• 14_daum-address_search
  -> daum-address_search.html, daum-address_search.css, daum-address_search.js