[JS]자바스크립트 Toggle 토글버튼 만들기

Sejeong Yang·2021년 3월 15일
0

JavaScript

목록 보기
2/3
```
<div class="m_check_wrap">
      <input type="checkbox" class="terms" id="agree2" onclick="checkAllList(event)">
      <label for="agree2">동의 1</label>
    </div>


	    <div class="m_check_wrap">
      <input type="checkbox" class="terms" id="agree1" onclick="checkAllList(event)">
      <label for="agree1">동의 2</label>
	    </div>


    <div class="m_check_wrap">
      <input type="checkbox" class="terms" id="allCheck" onclick="allCheck(event)">
      <label for="allCheck">모두 동의</label>
    </div>
</section>
```

/ 체크박스 전체선택, 전체해제 /
document.getElementById('allCheck').onclick = function() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var checkbox of checkboxes) {
checkbox.checked = this.checked;
}
}

/ 체크박스 전체선택, 전체해제 /
// function allCheck(e) {
// if(e.target.checked) { //전체 체크 버튼 클릭시 전체 체크 및 해제
// document.querySelectorAll(".terms").forEach(function(v, i) {
// v.checked = true;
// });
// } else {
// document.querySelectorAll(".terms").forEach(function(v, i) {
// v.checked = false;
// });
// }
// }
// function checkAllList(e) {
// let checkCount = 0;
// document.querySelectorAll(".terms").forEach(function(v, i) {
// if(v.checked === false){
// checkCount++;
// }
// });

// if(checkCount>0) {
// document.getElementById("allCheck").checked = false;
// } else if(checkCount === 0) {
// document.getElementById("allCheck").checked = true;
// }
// }

var terms1 = document.getElementById("agree1");
var terms2 = document.getElementById("agree2");
var termsAll = document.getElementById("allCheck");

var isCheckedTerms1 = false;
var isCheckedTerms2 = false;
var isCheckedTermsAll = false;

terms1.onClick = function() {
if(isCheckedTerms1){ //checked
//execute code here
}else{ //unchecked
//execute code here
}
}

terms2.onClick = function() {
if(isChecked){ //checked
//execute code here
}else{ //unchecked
//execute code here
}
}

termsAll.onClick = function() {
if(isChecked){ //checked
//agree1 && agree2 all check
}else{ //unchecked
//agree1 && agree2 all check
document.getElementById("allCheck").checked = true;
}
}

var isChecked= document.getElementById('allCheck').checked;

function checkAllList(terms1, terms2, targetTerms) { //체크 버튼 클릭시 전체 체크 버튼 체크 및 해제
if (terms1 === true && terms2 === true) {
// targetTerms = true;
console.log("됐다!")
console.dir(targetTerms)
targetTerms.checked = true;
} else {
targetTerms.checked = false;
}
}


이걸 못해서 처음에 엄청 쩔쩔 맸었던 기억이.............

훗 날의 나를 위해 남기는 기록이다.
profile
Front End Developer

0개의 댓글