#JavaScript checkbox 전체선택 구현하기

 

 

checkbox를 눌러서 전체 선택을 구현하고

 

선택된 리스트만 서버로 전송하는 로직을 구현해보겠습니다

 

 

 

이런 형태의 리스트를 만들었는데요

 

맨 위에 주황색에 체크박스를 누르면 전체선택이 되는

 

 

요렇게 되는 방법입니다.

 

제가 안드로이드에서 구현할 때는 좀 상당히 복잡했던 기억이 나는데요

(물론 제가 복잡하게 구현을 했을수도 있습니다)

 

JavaScript에서는 상당히 쉽게 구현할 수 있었습니다.

 

<div class="box-body pt-0 px-0 responsive">
    <table id="targets">
         <thead>
         <tr>
         <th style="visibility:hidden;position:absolute;"></th>
         <th>
          <div class="pgn-checkbox"><input type="checkbox" id="all_select"><span></span>
        </div>
     </th>
     <th>이름(이메일)</th>
     <th>연락처</th>
     <th>소속</th>
     <th>직급</th>
     <th>등록일</th>
     </tr>
     </thead>
    <tbody>
    </tbody>
    </table>
</div>

 

대략 이렇게 테이블을 구현해서 javascipt로 <tbody> 를 구현해 줬구요

 

JavaScript 부분을 보면

        $('#all_select').click(function () {
            if ($("input:checkbox[id='all_select']").prop("checked")) {
                $("input[type=checkbox]").prop("checked", true);
            } else {
                $("input[type=checkbox]").prop("checked", false);
            }
        });

짠

 

이게 끝입니다.

id = "all_select"를 누르면

 

모든 checkbox 타입의 input box의 checked를 true로 바꿔라!

 

엄청나게 쉽지 않습니까?

 

자 그럼 체크된 애들만 가져오는 방법을 보겠습니다.

 

        $('#del_target').click(function () {
            let tbodyTr = $('tbody tr');
            const tdArr = [];	// 배열 선언
            const td = tbodyTr.children();

            td.each(function (i) {
                if (td.eq(i).children().children().prop("checked")) {
                    tdArr.push(td.eq(i - 1).text());
                }
            });
            console.log(tdArr);
        });

 

tbody tr의 children을 가져와서

 

checked 된 애들만 tdArr 배열안에다 넣어주는겁니다!

 

요거 그대로 복붙하셔도 되요 ㅎㅎ

 

이렇게 체크한 후!

 

콘솔에서 로그를 찍어보면 아래와 같이 나옵니다

이 어레이를 서버로 전송해서

 

처리하고자 하는 로직을 구현해주면 되겠죠?

 

이상입니다.