반응형
문제
모든 checkbox를 checked하는 '전체동의'와 각각의 '개인정보 사용 동의', '마케팅 수신 정보 동의', '제3자 정보 전달 동의', '기타 정보 수집 동의' 의 checkbox를 작성하시오.
- 전체 동의 체크시 하위 동의란이 체크되어야합니다.
- 하위 동의란이 비체크시 전체 동의 체크가 비동의 되어야 합니다.
해법
1. body에 각각의 checkbox를 생성한다.
<body>
<label for="id_a"> 전체동의 <input type="checkbox" name="all" id="id_a"> </label><br>
<label >개인정보 사용 동의<input type="checkbox" name="ckbox" id="id_b"></label><br>
<label >마케팅 수신 정보 동의<input type="checkbox" name="ckbox" id="id_c"></label><br>
<label >제3자 정보 전달 동의<input type="checkbox" name="ckbox" id="id_d"></label><br>
<label >기타 정보 수집 동의<input type="checkbox"name="ckbox" id="id_e"></label><br>
</body>
2. 각각의 checkbox를 불러온다.
document.addEventListener('DOMContentLoaded', () => {
const ckTag = document.getElementById('id_a')
const evtBtnTag1 = document.getElementById('id_b')
const evtBtnTag2 = document.getElementById('id_c')
const evtBtnTag3 = document.getElementById('id_d')
const evtBtnTag4 = document.getElementById('id_e')
3. 전체동의 checkbox의 이벤트를 생성한다.
ckTag.addEventListener('click', (event) => {
const chckValue = event.currentTarget.checked;
evtBtnTag1.checked = chckValue
evtBtnTag2.checked = chckValue
evtBtnTag3.checked = chckValue
evtBtnTag4.checked = chckValue
})
4. 각각의 checkbox에 전체동의를 해제하는 이벤트를 생성한다.
evtBtnTag1.addEventListener('click', (event) => {
if(event.currentTarget.checked == false){
ckTag.checked = false;
}
})
evtBtnTag1.addEventListener('click', (event) => {
if(event.currentTarget.checked == false){
ckTag.checked = false;
}
})
evtBtnTag3.addEventListener('click', (event) => {
if(event.currentTarget.checked == false){
ckTag.checked = false;
}
})
evtBtnTag4.addEventListener('click', (event) => {
if(event.currentTarget.checked == false){
ckTag.checked = false;
}
})
CODE
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//선택 동의를 해제 했을 시 전체동의가 해제 되게
document.addEventListener('DOMContentLoaded', () => {
const ckTag = document.getElementById('id_a')
const evtBtnTag1 = document.getElementById('id_b')
const evtBtnTag2 = document.getElementById('id_c')
const evtBtnTag3 = document.getElementById('id_d')
const evtBtnTag4 = document.getElementById('id_e')
ckTag.addEventListener('click', (event) => {
const chckValue = event.currentTarget.checked;
evtBtnTag1.checked = chckValue
evtBtnTag2.checked = chckValue
evtBtnTag3.checked = chckValue
evtBtnTag4.checked = chckValue
})
evtBtnTag1.addEventListener('click', (event) => {
if(event.currentTarget.checked == false){
ckTag.checked = false;
}
})
evtBtnTag1.addEventListener('click', (event) => {
if(event.currentTarget.checked == false){
ckTag.checked = false;
}
})
evtBtnTag3.addEventListener('click', (event) => {
if(event.currentTarget.checked == false){
ckTag.checked = false;
}
})
evtBtnTag4.addEventListener('click', (event) => {
if(event.currentTarget.checked == false){
ckTag.checked = false;
}
})
})
</script>
</head>
<body>
<label for="id_a"> 전체동의 <input type="checkbox" name="all" id="id_a"> </label><br>
<label >개인정보 사용 동의<input type="checkbox" name="ckbox" id="id_b"></label><br>
<label >마케팅 수신 정보 동의<input type="checkbox" name="ckbox" id="id_c"></label><br>
<label >제3자 정보 전달 동의<input type="checkbox" name="ckbox" id="id_d"></label><br>
<label >기타 정보 수집 동의<input type="checkbox"name="ckbox" id="id_e"></label><br>
</body>
</html>
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 확률 뽑기 (0) | 2022.05.04 |
|---|---|
| [JavaScript] UI 설계 예제 (0) | 2022.05.04 |
| [JavaScript] 과일 상자 추가하기 (table 추가 예제) (0) | 2022.05.02 |
| [JavaScript] 주사위의 값 구하기 (0) | 2022.05.01 |
| [JavaScript] 원주율에 따른 원의 넓이, 둘레 구하기 (예제) (0) | 2022.04.27 |