JavaScript & HTML

jquery 체크박스 전체 선택/해제 (checkbox)

husks 2017. 7. 13. 14:38
반응형


체크 박스 전체 선택 및 해제 입니다.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                
                //전체 선택/해제
                $("#product_check_all").click(function(){
            
                    var chk = $(this).is(":checked");
                    
                    if(chk){
                        $('input[name*="product_check"]').prop('checked', true);
                    }else{
                        $('input[name*="product_check"]').prop('checked', false);
                    }
                    
                });
                
                //체크 항목 확인
                $("#check").click(function(){
                    
                    $('input[name*="product_check"]').each(function(i){
                
                        if($(this).is(":checked")){
                            alert($(this).val());
                        }
 
                    });
                
                });
                                 
            });
        </script>
    </head>
    <body>
        <table border="1" width="150">
            <thead>
                <tr>
                    <th><input type="checkbox" id="product_check_all"></th>
                    <th>상품</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td align="center"><input type="checkbox" name="product_check" value="book"></td>
                    <td>책</td>
                </tr>
                <tr>
                    <td align="center"><input type="checkbox" name="product_check" value="computer"></td>
                    <td>컴퓨터</td>
                </tr>
                <tr>
                    <td align="center"><input type="checkbox" name="product_check" value="cup"></td>
                    <td>컵</td>
                </tr>
                <tr>
                    <td align="center"><input type="checkbox" name="product_check" value="cap"></td>
                    <td>모자</td>
                </tr>
                <tr>
                    <td align="center"><input type="checkbox" name="product_check" value="shoes"></td>
                    <td>신발</td>
                </tr>
                <tr>
                    <td align="center"><input type="checkbox" name="product_check" value="phone"></td>
                    <td>휴대폰</td>
                </tr>
            </tbody>
        </table>
        <br>
        <button id="check">조회</button>
    </body>
</html>


(예제화면)


반응형
저작자표시 비영리 변경금지