[jQuery] jquery로 라디오버튼을 재 클릭해서 체크 해제

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                  

 

출처 : https://saem-ee.tistory.com/18