[jQuery] jquery로 라디오버튼(radio) 선택 해제하기

html의 input 태그의 타입의 종류중에 checkbox(체크박스)와 radio(라디오) 버튼이 있다. 

이 글에서는 정의가 중점이 아니니 간략하게 설명하고 넘어간다!

버튼생성은

<input type="checkbox" />

<input type="radio" />

이런식으로 가능한데,

속성으로 name, value, checked를 설정할 수 있다.

이 두개의 타입은 비슷하나 차이점이 존재한다. 

* checkbox는 중복체크가 가능하고 체크를 해제할 수 있음

* radio는 중복체크가 불가능하고 체크를 해제할 수 없음

체크박스를 라디오버튼처럼 사용하는 예제는 많은데 라디오 버튼을 체크박스처럼 만드는 예제는 많이 없어서 공부하고 배운 토대로 코드를 올려본다.

   var beforeChecked = -1;
 
      
 
   $(function(){
 
 
 
      $(document).on("click", "input[type=radio]", function(e) {
 
         var index = $(this).parent().index("label");
 
         if(beforeChecked == index) {
 
         beforeChecked = -1;
 
         $(this).prop("checked", false);
 
         }else{
 
         beforeChecked = index;
 
         }
 
      });
 
 });

이런식으로 스크립트를 짜주고 라디오 버튼을 만들어 실행시켜보면 선택해제가 아주 잘된다 bb

(radio 에 name 속성으로 지정 가능 "input[type=radio][name=test]" )

처음에는 비교를 그냥 checked == true로 했는데 라디오가 선택될때 이미 값이 true로 바뀌는것 때문에 애먹었다

***************************************************************************************************************************

라디오버튼이나 체크박스를 이쁘게 사용하기 위해 iCheck plugin을 사용하는 경우가 있는데

그럴때에는 일반 제이쿼리 코드로는 동작하지 않는다.

var beforeChecked = -1; $(document).ready(function(){ $('input[type=radio]').on('ifClicked', function(event){ var index = $(this).parent().index("label"); if(beforeChecked == index){ beforeChecked = -1; $(this).iCheck("uncheck"); }else{ beforeChecked = index; } }); });

iCheck 플러그인을 사용하고 있는지 잘 확인하고 사용하여 똥꼬쇼하는일 없게하자 ㅠㅠ

iCheck plugin 참고 - https://papababo.tistory.com/186