작년 리액트로 체크박스 전체선택하고 선택 하나라도 안되면 전체 선택 해제되고 이런 거 해보려고 했는데
너무 어려워서 자바스크립트로라도 해봐야겠다 해서 한번 만들어봤다.
이것도 어려워서 회사 개발자분한테 엄청 귀찮게 막 여쭤봤다.
이제 리액트로도 만들 수 있도록 공부를 열심히 해야겠다.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>자바스크립트 체크박스</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="checkbox">
<div>
<input type="checkbox" class="chk_all">
<label>전체 선택/삭제</label>
</div>
<div>
<input type="checkbox" class="chk" value="한국">
<label>한국</label>
</div>
<div>
<input type="checkbox" class="chk" value="중국">
<label>중국</label>
</div>
<div>
<input type="checkbox" class="chk" value="일본">
<label>일본</label>
</div>
<div class="result"></div>
</div>
<script src="./script.js"></script>
</body>
</html>script.js
const chk_all = document.querySelector('.chk_all')
const chks = document.querySelectorAll('.chk')
const result = document.querySelector('.result')
let countryText = []
function allChk(){
chk_all.addEventListener('click', ()=> {
chks.forEach((chk)=> {
const country = chk.value
chk.checked = chk_all.checked
if(!chk_all.checked) {
countryText = []
result.innerHTML = `<div>${countryText}</div>`
} else {
let isChecked = false;
for(let i =0; i< countryText.length;i++){
if(countryText[i] === country) {
isChecked = true
}
}
if(!isChecked) { countryText.push(country)}
result.innerHTML = `<div>${countryText}</div>`
}
if(countryText.length > 0){
chk_all.addEventListener('click', ()=> {
result.innerHTML = `<div>${countryText}</div>`
})
}
})
})
}
allChk()
chks.forEach((chk,i)=> {
const country = chk.value
chk.addEventListener('click',()=> {
if(!chk.checked) {
countryText = countryText.filter(function(item){
return item !== country
})
result.innerHTML = `<div>${countryText}</div>`
} else {
countryText.push(country)
result.innerHTML = `<div>${countryText}</div>`
}
if(countryText.length === 3) {
chk_all.checked = chk.checked
} else {
chk_all.checked = false
}
})
})