체크박스 unchecked 일때, 체크하라는 alert창 띄우기 :: checkbox, javascript study

 

 

input type="checkbox" 체크박스 체크여부로 인한 JS 제작

---

 

 

 

작업중에 checkbox가 체크가 안되어있을 때, 경고문 뜨도록하는 작업이 들어왔다.

간단할 줄 알았는데 생각보다 로직이 은근 꼬여서 이번 기회에 어떻게 해결했는지 메모하려고 한다.

이런것들이 다 나의 피와 살, 토양과 영양분, 커리어와 연봉이 되거라며.. 연봉 incease(가즈아 🚀)!!!

 

 

 

 

 

[ HMTL ]

<div class="checkbox-part">
    <label for="all"><input type="checkbox" id="all" value="all" /> 전체</label>
    <label for="image"><input type="checkbox" id="image" value="image" /> Image</label>
    <label for="exel"><input type="checkbox" id="exel" value="exel" /> Exel</label>
    <label for="ppt"><input type="checkbox" id="ppt" value="ppt" /> PPT</label>
    <label for="word"><input type="checkbox" id="word" value="word" /> Word</label>
</div>

<div class="search-part">
    <input id="searchKey" type="text" value="" title="검색어입력" placeholder="파일 검색">
    <button type="button" class="button-search">seach</button>
</div>

 

[ JavaScript Version 01 ]

// search input이랑 button 부분
const searchInput = document.querySelector('#searchKey');
const searchButton = document.querySelector('.button-search');

// check박스 모여있는 부분
const checkPart = document.querySelector('.checkbox-part');
const checkboxes = checkPart.querySelectorAll('input');

searchButton.addEventListener('click', (e) => {
    e.preventDefault();
    let value = searchInput.value;	// input 안에 텍스트 value 값
    if (value === '') alert('검색어를 입력하세요.')
	// value 값이 없으면 '검색어 입력하라'는 문구 알람 띄우기
    
    //💥여기서 에러가 터짐💥
    for (let i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked === false) {	// 체크박스를 돌려서 체크안됐으면
            alert('검색할 파일 형태를 선택하세요.')	// '체크박스 선택하라'는 알람 띄우기
        }
        // 💥💥 한번 알람이 떠야하는데 5번 알람뜸....💥💥
    }
});

 

 

 

 

[ Error 발생과 수정사항 ]

 

1. 체크박스가 모두 unchecked면 alert 알람이 한번 띄워야하는데, 체크박스 개수만큼 여러번 뜬다.

 

 

 

 

2. 함수로 모듈화해서 다른곳에서도 필요할 때 쓸 수 있도록 수정하고 싶다.

 

 

 

 

 

 

 

 

HOW TO CHANHED

---

[ JavaScript Version 02 ]

const searchInput = document.querySelector('#searchKey');
const searchButton = document.querySelector('.button-search');

searchButton.addEventListener('click', (e) => {
    e.preventDefault();
    AlertCheckbox()	// all unchecked 일 때, 이 함수 소환!
    EnterSearchWords();  // input에 value 없을 때, 이 함수 소환!
})

//😍 input no word 함수
function EnterSearchWords(){
    let value = searchInput.value;
    if( value === '') alert('검색어를 입력하세요.')
}

//😍 ALL NO checked 함수
function AlertCheckbox(){
    const checkPart = document.querySelector('.checkbox-part');
    const checkboxes = checkPart.querySelectorAll('input');

	//😍 이렇게 바꿨어요!
    for( let i = 0; i < checkboxes.length; i ++){
        if(checkboxes[i].checked === true) return;	
        // 체크박스 돌다가 checked가 있으면 바로 return!!
    }
    alert('검색할 파일 형태를 선택하세요.'); 
    // 체크없으면 바로 return해서 alert 띄우기!
}

 

 

 

 

1. 첫번째 문제였던 체크박스 개수만큼 뜨는 현상.

 

 

 

반복문(for문) 돌려서 체크박스가 unchecked이면 alert 떠라고 설정했더니,

[ i ] 값이 하나씩 들어가면서 legnth 갯수만큼 여러번 뜨는 형상이 나타났었다...

그래서 생각을 전환시켜서 checked가 있으면 바로 return 통해 밖으로 빠져나가도록 작업을 해봤다.

 

 

 

 

반복문을 돌려서 checked가 있으면 바로 return으로 끝⭐!!

unchecked이면 for문으로 다 돌린다음에 자연스럽게 alert() 경고문을 1번 불러온다.

 

 

 

 

 

 

 

 

- 끝 -