[Javascript] 버튼 클릭 한번으로 모든 체크 박스 체크 해제하기

하나만 선택할 수 있는 셀렉트박스(select)와 라디오 버튼(radio button)와 달리 체크 박스는 여러 개를 선택할 수 있죠!

이런 점은 간혹 귀찮음을 주기도 합니다.

예를 들면 여러 개를 선택했는데, 모두 취소하고 다시 선택해야할 때!!ㅎㅎㅎㅎ

그럴 때 사용할 수 있는 기능인 버튼 클릭 한번으로 모든 체크박스 해제하는 방법입니다!

 

<div class="input-box">
  <input type="checkbox" name="chk" value="AAA">AAA</input>
  <input type="checkbox" name="chk" value="BBB">BBB</input>
  <input type="checkbox" name="chk" value="CCC">CCC</input>
  <input type="checkbox" name="chk" value="DDD">DDD</input>
</div>
<button>Clear All</button>

 

 

스타일은 생략할랍니다 ㅎㅎ

$('.btn-clear').click(function(){
  var searchChk = $('.input-box').find('input')
  for(var i=0;i<searchChk.length;i++){
    if(searchChk[i].checked == true){
      searchChk[i].checked = false;
    }
  }
})

for문을 이용해서 체크되어 있는 input을 찾아서 해제 시켜줍니다!!

이를 응용하면 오늘 했던 전체 체크 해제와 반대로 전체 체크 선택을 만들어 낼 수도 있겠네요!ㅎㅎ

---

아래링크에서 작동 확인해보세요 ㅎㅎ

 

See the Pen Untitled by Younjung Jeong (@jojv) on CodePen.

---

글 읽어주셔서 감사합니다!!