jQuery checkbox 체크시 상위로 올리기

jQuery checkbox 체크시 상위로 올리기

개발하다 checkbox에 체크하면 그 checkbox를 위로 올려달라는 요구가 

들어올때 요긴하게 사용하자.

ID	Action
1	미체크
2	미체크
3	미체크
4	미체크
5	미체크

jQuery CODE

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

 $('table').on('change', '[type=checkbox]', function () {

     var $this = $(this);

     var row = $this.closest('tr');

     if ( $this.prop('checked') ){ 

        row.insertBefore( row.parent().find('tr:first-child') )

            .find('label').html('체크완료'); 

     }

     else { 

        row.insertAfter( row.parent().find('tr:last-child') )

            .find('label').html('미체크');  

     }

});

</script>

HTML CODE

<table>

    <thead>

        <tr>

            <th>ID</th>

            <th>Action</th>

        </tr>

    </thead>

    <tbody>

        <tr class="c1">

            <td>1</td>

            <td><input type="checkbox" id="c_1"><label for="c_1">미체크</label></td>

        </tr>

        <tr class="c2">

            <td>2</td>

            <td><input type="checkbox" id="c_2"><label for="c_2">미체크</label></td>

        </tr>

        <tr class="c3">

            <td>3</td>

            <td><input type="checkbox" id="c_3"><label for="c_3">미체크</label></td>

        </tr>

        <tr class="c4">

            <td>4</td>

            <td><input type="checkbox" id="c_4"><label for="c_4">미체크</label></td>

        </tr>

        <tr class="c5">

            <td>5</td>

            <td><input type="checkbox" id="c_5"><label for="c_5">미체크</label></td>

        </tr>

    </tbody>

</table>