mygomii

[script&Jquery] #체크박스 전체선택&해제&삭제하기 본문

JavaScript&JQuery

[script&Jquery] #체크박스 전체선택&해제&삭제하기

mygomii 2018. 4. 20. 23:41
반응형



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table>
    <thead>
        <tr>
            <th class="checkbox">
                <input type="checkbox" id="ck_all">
            </th>
        </tr>
    </thead>
    <tbody>
        <tr data-tr_value="1">
            <td><input type="checkbox" name="checkRow" value="1"></td>
        </tr>
         <tr data-tr_value="2">
            <td><input type="checkbox" name="checkRow" value="2"></td>
        </tr>
         <tr data-tr_value="3">
            <td><input type="checkbox" name="checkRow" value="3"></td>
        </tr>
        <tr data-tr_value="4">
            <td><input type="checkbox" name="checkRow" value="4"></td>
        </tr>
        
    </tbody>
</table>
 
<input type="button" id="delete">
cs




1. prop()를 이용하여 checkbox 전체선택 및 해제
2. 체크된 value값 찾아서 data-tr_value 와 일치하면 tr 삭제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function(){
    //체크박스 전체 선탣&해제
    $('#ck_all').click(function(){
         if($("#ck_all").prop("checked")){
            $("input[type=checkbox]").prop("checked",true); 
        }else{
            $("input[type=checkbox]").prop("checked",false); 
        }
    });
 
    $('#delete').click(function(){
        if(confirm("삭제하시겠습니까?")){
            $("input[name=checkRow]:checked").each(function(){
                var tr_value =$(this).val();
                var tr=$("tr[data-tr_value='"+tr_value+"']");
                tr.remove();
            });
        }else{
            return false;
        }
    });
 
});
cs


반응형