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

JavaScript & HTML

by 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>

(예제화면)

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

'JavaScript & HTML' 카테고리의 다른 글

자바스크립트 substring, substr, indexOf, lastIndexOf (javascript 문자열 자르기, 뒤에서 자르기, 찾기) (4)	2017.11.14
뒤로가기, 이전 페이지 이동 (0)	2017.10.12
JavaScript 언어의 핵심에 대한 내용을 모아 만든 JavaScript Garden (0)	2017.06.07
javascript Map HashMap (jquery) (0)	2017.05.19
[자바스크립트] 배열에 값 앞 또는 뒤에 추가하기, Unshift(), Push() (0)	2017.05.11