[JavaScript/Jquery] 라디오버튼을 다루어보자

현재 개발진행중인 프로젝트에서 라디오 버튼을 사용하는 UI가 많이 등장한다. 

라디오 버튼은 보통 다중선택으로 사용하지 않고 하나만 선택할 수 있도록 사용한다. 

하지만 .. 라디오 버튼을 다중선택 할 수 있게 변경하라는 QA를 받게되면서

평소에 거들떠보았던,, 라디오버튼에 대해서 자세히 파고들었다. 

내용을 다시 정리해보고 복기해보려한다. 

 

1. 라디오 버튼 기본 폼

  <form>
    <input type="radio" name="color" value="red"> 빨강<br>
    <input type="radio" name="color" value="blue"> 파랑<br>
    <input type="radio" name="color" value="green"> 초록<br>
  </form>

기본 폼과 실행 화면이다. <form>대신 <div>를 사용하면 된다. 

개발을 하기 위해 이정도는 기본적으로 꼭 알아야하고.. 이후로 심화내용을 다루어보겠다. 

 

 

 

2. 라디오 버튼 선택과 해제 

Jquery를 사용하여 라디오버튼을 선택, 해제할 수 있다. 

    <form>
    <input type="radio" name="color" id = "red" value="red"> 빨강<br>
    <input type="radio" name="color" id = "blue" value="blue"> 파랑<br>
    <input type="radio" name="color" id = "green" value="green"> 초록<br>
    </form>
  
  <script>
   // id = green 라디오 버튼 선택 
    $("#green").prop("checked", true);
    
   // id = red 라디오 버튼 해제
   	$("#red").prop("checked", true);
  </script>

 

1. 라디오 버튼 선택 

$("#아이디").prop("checked, true) 

 

2. 라디오 버튼 해제 

$("#아이디").prop("checked, false)

 

3. 체크된 라디오버튼 value 조회 

$('input[name = 이름]:checked').val();

 

4. 라디오 체크여부 조회 

$('input : radio[name = 이름]').is(":checked");

 

이 정도만 알고 있어도 잘 활용해서 써먹을 수 있다. 

 

 

 

 

3. 라디오 버튼을 다중선택? 

구글링해 본 결과 라디오버튼은 다중선택을 할 때 잘 쓰지 않는다고 한다. (주로 체크박스로 모양을 라디오 버튼과 유사하게 구현 한다고 함)

하지만 개발자는 .. 하라고 주면 해야한다.. 

 

그래서 라디오버튼 다중선택을 하는 방법에 대해서 알아보았다. 또한 선배림께서 name값을 다르게 주면 된다고 하셨다. 

 

우선 사용할 라디오버튼이 데이터테이블과 합쳐져있었고 .. 

'라디오 버튼이 여러개'보단 '라디오버튼을 포함한 tr한 줄이 여러개'였다. 

처음에 name이 없었고 id가 모두 같아 어떻게 줄 지 고민을 많이 했다. 

 

- 백엔드에서 반환하는 row.id로 name을 줄까? 생각해봤지만 .. 데이터가 담겨있지 않은 줄의 값은 null이라 같은 name을 가진 것들끼리는 다중 선택이 불가능했다. (업무적인 이야기라 그냥 row.id가 null로 겹치는 값이 많았다고 표현해야겠다. ) 

<tr>
  <input type = radio
         name = "studentCheckBox_${row_id}"
         value = "선택"
         id = "date"
         > 라디오버튼
  </input>
  ...
</tr>

백엔드에서 반환된 데이터의 길이를 받아와 row_id라는 전역 변수를 설정한 뒤 이 변수에 넣었다. 

그렇게 하면 라디오버튼 다중선택 가능 ! 

 

하지만 .. 문제점이 있었으니.. 선택과 해제가 자유롭지 않다는 것이었다.

 

 

 

4. 라디오버튼 선택, 해제 함수 

2번에서 배운 내용을 토대로 .. 자유로운 선택과 해제를 시도해보았다. 

 

그렇게 완성된 함수 .. 

let beforeChecked1 = true;
      $(document).on("click","input[name=studentCheckBox_1]",function(e){

        let index = $(this).parent().index("label");
        console.log('clickeventListen')
        console.log('beforeChecked1 : ',beforeChecked1)

        if(beforeChecked1 == index){
          beforeChecked1 = true;
          $(this).prop("checked", false)
        }else{
          beforeChecked1 = index;
        }
})

beforeChecked는 앞서 체크가 되었는지, 아닌지를 나타내는 플래그이다. 

체크가 되어 있는 상태에서 누르면 해제를 시켜주고, 체크가 되어있지 않은 상태에서 누르면 체크를 해준다. 

하지만 문제.. studnetCheckBox_i가 8개(처음 보여지는)만 있는 줄 알았으나 .. 사용자가 선택함에 따라 10개, 20개가 될 수 도 있었다. 그래서 반복문을 사용해주었다. 

let object = {};
      for(let i =1; i< dateListLen ;i++){
        object[`beforeChecked${i}`] = true;
        $(document).on("click","input[name=studentCheckBox_"+i+"]",function(e){

          console.log(dateListLen,' : dateListLen')
          console.log('num : ', num)
          let index = $(this).parent().index("label");
          console.log('clickeventListen')
          console.log('beforeChecked : ',object[`beforeChecked${i}`])

          if(object[`beforeChecked${i}`] == index){
            object[`beforeChecked${i}`] = true;
            $(this).prop("checked", false)
          }else{
            object[`beforeChecked${i}`] = index;
          }
        })
      }

그럼 .. 받아온 데이터만큼 (dataListLen은 받아온 prop) 앞서 만든 함수가 생성된다. 

드디어 .. ! 

완성된 줄 알았으나 .. 

 

 

 

5. beforeChecked겹치는 이슈 

다른 페이지에서도 라디오버튼 name을 studentCheckBox_1, studentCheckBox_2, studentCheckBox_3 .. 을 공유하여 beforeChecked가 겹치는 문제점이 발생했다. 

 

resetChecked라는 beforeChecked변수를 초기화해주는 함수를 추가하여 해결해주었다. 

function resetChecked(len){
        for(let i =1; i< len+1 ;i++){ 
          object[`beforeChecked${i}`] = -1;
        }
      }

이후 만들어진 표 UI에 대한 작업을 마치고 드디어 한 페이지 기능 및 UI작업이 끝났다 .. 

 

개발을 한다는 것은 .. 특히 프론트엔드를 한다는 것은 이슈터지고터지고터지고의 연속과 수습의 연속이다.. 

사실 본인의 실력이 많이 모자라서 그렇게 느낄 수 있다. 

 

아무튼 라디오버튼에 대한 고민이 많으신들이 보시고 찾아갈 점을 찾아보시면 좋을 것 같다 ~ 

 

 

이 많은 과정을 하면서 배운 것 : 개발자는 기획을 바꾸지 말 것 → 기획이 바뀔 일은 기획자와 상의