[Jquery ]를 이용해서 열에있는 모든 라디오버튼 일괄체크 구현

이번에 표같은 구조로 되어있는 화면에서 표내의 열의 모든 라디오버튼을 일괄선택 해주는 기능을 구현해야했었는데, 내가 구현했던 방법을 기록하고, 비슷한 기능을 구현하는 사람이 있을까 해서 기록해본다.

 

대략 화면 UI는 다음과 같다.

설명	[버튼] : 전체 예	[버튼] : 전체 아니오
1	라디오버튼(O)	라디오버튼(X)
2	라디오버튼(O)	라디오버튼(X)
3	라디오버튼(O)	라디오버튼(X)
4	라디오버튼(O)	라디오버튼(X)

카카오 오븐이나, 파워포인트 등 툴로 UI를 그릴수도 있지만 귀찮아서 그냥 블로그내의 표로 대체..

위 UI에서 필요한 기능은 헤더부 상단 버튼을 누르면 아래 모든열(세로)의 라디오버튼이 예또는 아니오로 선택되어야 하고, 각 행(가로)의 라디오버튼 태그들의 name은 같은 상황이였다.

html 코드는 다음과 비슷한 형태고, name규칙은 test-1, test-2 이런식으로 작성되있다고 할 때 

<!-- 생략 -->
<div>
    <input type="radio" name="test">
    <label>라디오1</label>
    <input type="radio" name="test">
    <label>라디오2</label>
</div>

나는 다음과 같이 코드를 작성했다.

// 일부 
 
$(document).on('click', '.test', function () { //전체 예, 아니오 버튼의 class명은 test라고 가정
    let $doc = $(document);
    let $value = $(this).val(); // 선택된 버튼의 value (예 1, 아니오 0)
    let $toggleList = $doc.find('input[name^=test]'); // name중에 test가 들어가는 모든 input찾기
    // let $toggleList = $doc.find('input[name^=ui-toggle]:not(:checked)'); // 체크되지 않은 모든 input찾기
    $toggleList.each(function (data, tag) { // 찾아진 결과를 반복문 순회하면서 클릭된 버튼의 value를 조건으로 체크되도록함
        $doc.find("input[name='" + tag.name + "'][value=" + $value + "]").trigger('click');
    })
});

이렇게 작성하면 모두예, 모두아니오 버튼을 클릭하면 아래의 모든 라디오버튼들이 일괄적으로 변경되게 된다.

외에 이미 선택되어있는 라디오버튼은 변경하지 않도록 하는 기능도 구현이 필요해서 구현해놨지만, 이 글에는 정리하지는 않을 예정이다.

더 컴팩트하게 짤수도 있었을 것 같은데, 조금아쉽다. 또 크로스브라우징 이슈때문에 vue.js를 사용하지 못한점, ES6이상의 문법을 사용하지 못한게 조금 아쉽다.