[JavaScript] checkbox 한 개 이상 체크 검사

 안녕하세요 코북입니다. 4월의 시작과 함께 테스트와 발표가 2번이나 있어서 정신없이 바쁘게 보내고 있습니다. 아무도 안 궁금하셨다고요?^^ 넵, 오늘은 사용자가 체크박스를 한 개 이상 체크하도록 권장하는 기능을 javascript로 구현해봤습니다.

 

 

1. 체크박스

체크박스를 검사해야 하기 때문에 먼저 체크박스가 필요하겠죠? 예시로 사용할 체크박스를 간단한 스타일로 만들어봤습니다.

@{
    cobook cob = ViewBag.cob;
}

...
<div>
  <tr>
    <td>
      <label>
        <input type="checkbox" id="c1" name="cobook" value="@cob.c1" @if(cob.c1 == "Y") { <text> checked</text>}/>
      </label>
      <label>
        <input type="checkbox" id="c2" name="cobook" value="@cob.c2" @if(cob.c2 == "Y") { <text> checked</text>}/>
      </label>
      <label>
        <input type="checkbox" id="c3" name="cobook" value="@cob.c3" @if(cob.c3 == "Y") { <text> checked</text>}/>
      </label>
      <label>
        <input type="checkbox" id="c4" name="cobook" value="@cob.c4" @if(cob.c4 == "Y") { <text> checked</text>}/>
      </label>
    </td>
  </tr>
</div>
<div>
  <button type="button" onclick="javascript:OnSave();">저장<button>
</div>

 

 

2. JavaScript

 자바스크립트로 조건을 걸어줍니다. querySelectorAll을 사용하면 조건에 일치하는 엘리먼트를 NodeList로 반환합니다. 그리고 .length로 NodeList의 크기를 확인할 수 있습니다. 변수에 담아서 크기가 0인 경우 경고창을 띄워주고 함수를 false로 리턴해줬습니다. 

function OnSave() {
  var cob_check = document.querySelectorAll('input[name="cobook"]:checked').length;
  if(cob_check == 0) {
      alert('체크박스를 하나 이상 선택해주세요~르레이히~')
      return false;
  }
}

 

 

 

3. 구현 화면

 

테두리가 하얗게 나와서 윤곽선 편집한 사진입니다.

 

잘 됩니다ㅎㅎ

 

 

배운 점

querySelectorAll을 사용해볼 수 있는 시간이었습니다.

 

 

 

본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll