[JQuery] 체크박스 전체 선택, 해제, 값 얻기

JQuery로 체크박스 전체 선택, 전체 해제, 그리고 선택한 체크박스에 해당하는 값을 얻어오는 것을 구현하겠다.

 

1. html로 테이블을 구성한다.

팁 : table>tr*7>td*3 를 입력하고 엔터를 누르면 7열 3행의 테이블이 자동완성된다.)

<table>
        <tr>
            <th>
                <input type="checkbox" name="all" id="all">확인
            </th>
            <th>제목</th>
            <th>글쓴시간</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk" id="chk1"></td>
            <td>1111</td>
            <td>11:11:11</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk" id="chk2"></td>
            <td>2222</td>
            <td>11:11:11</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk" id="chk3"></td>
            <td>3333</td>
            <td>11:11:11</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk" id="chk4"></td>
            <td>4444</td>
            <td>11:11:11</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk" id="chk5"></td>
            <td>5555</td>
            <td>11:11:11</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk" id="chk6"></td>
            <td>6666</td>
            <td>11:11:11</td>
        </tr>
    </table>

전체 체크박스읜 id는 'all'이고 개별적인 체크박스들의 name은 'chk'로 설정한다.

 

2. 전체 선택/ 해제 에 대한 자바스크립트 작성(JQuery 식대로 function 구성)

        $('#all').click(function () {
            if ($("#all").is(":checked")) $("input[name=chk]").prop("checked", true);
            else $("input[name=chk]").prop("checked", false);
        });

전체 선택 버튼을 눌러 체크표시가 되면, chk이란 이름의 태그들이 checked 상태가 되고, 아니면 checked 가 아닌상태,  즉 꺼진다는 내용의 function() 구성.

 

3. 개별 체크박스마다의 개별 값 불러오기( JQuery 식대로 function 구성)

 $('#log_button').click(function () {
            if ($('input:checkbox[name=chk]:checked').length > 0) {
                let checkbox = $("input[name=chk]:checked");
                checkbox.each(function (i) {
                    let tr = checkbox.closest('tr').eq(i);
                    let td = tr.children();
                    let subject = td.eq(1).text();
                    $('.allData').append("체크 항목 제목 : " + subject + "<br>");
                    console.log(subject);
                });
            } else {
                alert("체크항목이 없습니다.");
            }
        });

<결과창>

 

 

 

 

 

D.O.N.E!!