웹 서핑중 팝업창에 '24시간동안 팝업창 띄우기 않기' 체크박스는 어떻게 구현하는걸까? 라는 궁금증에 만들다가 checkbox 옆 글씨를 클릭하면 체크박스 체크 / 해제가 되도록 만들고 싶어졌다.
HTML
<body>
<input type="checkbox" id="chk">
<span id="spanClick">누르면 체크 / 체크해제</span>
</body>1.if문
let spanText = document.getElementById('spanClick');
spanText.addEventListener('click', function() {
let chkBox = document.getElementById('chk');
if(chkBox.checked == false) {
chkBox.checked = true;
}else if(chkBox.checked == true) {
chkBox.checked = false;
}
});if문에서 체크박스 체크여부를 확인하는 .checked(ture/false로 반환)을 사용하여 미체크시 체크, 체크시에는 미체크로 표현했다.
2.click()
let spanText = document.getElementById('spanClick');
spanText.addEventListener('click', function() {
document.getElementById('chk').click();
});span태그 클릭시 input체크박스에 클릭이벤트를 준다.
3. = 대입연산자
let spanText = document.getElementById('spanClick');
spanText.addEventListener('click', function() {
let chkBox = document.getElementById('chk');
chkBox.checked = !chkBox.checked;
});= 대입연산자를 사용하여 .checked가 true면 false로 대입, false면 true로 대입된다.
hi