[jQuery] 라디오 버튼/ 체크박스 해제하기

이번 포스팅에서는 jQuery를 이용하여 사용자가 선택한 라디오 버튼이나 체크박스를 해제하는 방법에 대해서 알아봅니다.

라디오 버튼 해제하기

우선 아래와 같은 화면을 하나 만들어 줍니다.

html 은 아래처럼 작성했습니다.

<div>
    <input type="radio" name="fruit" value="orange"><label>오렌지</label>
    <input type="radio" name="fruit" value="apple"><label>사과</label>
    <input type="radio" name="fruit" value="banana"><label>바나나</label>
    <button onclick="deselect()">선택해제</button>
</div>

여기서 name 값이 중요합니다. 라이오 버튼을 하나의 그룹으로 묶어주는 속성이기 때문이죠.

처음엔 아무런 버튼이 선택이 안되어있습니다. 

 

그리고 스크립트는 아래처럼 작성합니다.

function deselect() {
  // name이 fruit인 라디오 버튼 일괄 해제
  $("input:radio[name='fruit']").prop('checked', false);
}

선택해제 버튼을 클릭하면 deselect 함수를 호출하고 함수 내에서는 radio 버튼타입의 input 중에서 name값이 fruit인 것들의 체크상태를 false로 설정합니다. 즉, fruit name에 속한 모든 체크상태가 해제되게 됩니다.

 

자바스크립트로 라디오 버튼 체크 해제하기

jQuery를 사용하지 않고 자바스크립트로 직접 구현하려면 아래와 같이 작성할 수 있습니다.

function deselect() {
    var fruits = document.getElementsByName("fruit");
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].getAttribute('type') === 'radio') {
      		fruits[i].checked = false;
      }
    }
}

 

체크박스 선택 해제하기

만약 라디오 버튼이 아니라 체크박스일 경우 선택자(selector)만 아래와 같이 변경해주면 됩니다.

function deselect() {
  // name이 fruit인 체크박스 일괄 해제
  $("input:checkbox[name='fruit']").prop('checked', false);
}

 

체크박스/라디오버튼 일괄 해제하기

그럼 만약 라디오 버튼과 체크박스를 모두 해제하려면 어떻게 할까요?

selector에서 radio나 checkbox라고 명시한 부분만 빼주면 됩니다.

단, 동일한 name 값으로 묶여있어야 합니다.

function deselect() {
  // name이 fruit인 모든 input 의 체크 상태 일괄 해제
  $("input[name='fruit']").prop('checked', false);
}

이렇게 말이죠.

 

간단하죠?

 

오늘도 즐코하세요~