본문 바로가기
Programming/JavaScript

[jQuery] 체크박스 전체선택/해제

by 막이 2014. 11. 21.
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        //전체선택 체크박스 클릭
        $("#allCheck").click(function(){
            //만약 전체 선택 체크박스가 체크된상태일경우
            if($("#allCheck").prop("checked")) {
                //해당화면에 전체 checkbox들을 체크해준다
                $("input[type=checkbox]").prop("checked",true);
            // 전체선택 체크박스가 해제된 경우
            } else {
                //해당화면에 모든 checkbox들의 체크를해제시킨다.
                $("input[type=checkbox]").prop("checked",false);
            }
        })
    })
</script>
</head>
<body>
    <table>
        <tr>
            <td>
                전체선택 : <input type="checkbox" id="allCheck"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
        </tr>
    </table>
</body>
</html>


'Programming > JavaScript' 카테고리의 다른 글

트리메뉴 드래그앤 드랍  (0) 2015.02.05
GET YYYY-MM-DD STRING FROM A DATE OBJECT  (0) 2015.02.02
ajax xml 파싱  (0) 2014.11.11
[jquery] xml <--> string parsing  (0) 2014.10.14
이미지 미리보기 소스2  (0) 2014.09.22