18. 8. 27.

약관동의(Javascript)

querySelectorAll 가 IE 8 부터 사용가능하기 때문에 8부터 적용가능
?
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>약관동의</title>
    <script type="text/javascript">
        window.onload = function () {
            var chks = document.querySelectorAll("input[name=chk]");
            var cllchkbox = document.getElementById("allChk");
            cllchkbox.onclick = function () {
                if (this.checked) {
                    for (var i = 0; i < chks.length; i++) {
                        chks[i].checked = true;
                    }
                } else {
                    for (var i = 0; i < chks.length; i++) {
                        chks[i].checked = false;
                    }
                }
            }
            function chkclick() {
                var chkarr = chks;
                var chkcnt = 0;
                for (var i = 0; i < chkarr.length; i++) {
                    if (chkarr[i].checked) { chkcnt++; }
                }
                if (chkarr.length == chkcnt) {
                    cllchkbox.checked = true;
                } else {
                    cllchkbox.checked = false;
                }
            }
            for (var i = 0; i < chks.length; i++) {
                var elm = chks[i];
                elm.onclick = function () {
                    chkclick();
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1">
        <label><input type="checkbox" id="allChk" />모든 약관동의</label>
        <div>약관1</div>
        <label><input type="checkbox" name="chk" /> 동의합니다.</label>
        <div>약관2</div>
        <label><input type="checkbox" name="chk" /> 동의합니다.</label>
        <div>약관3</div>
        <label><input type="checkbox" name="chk" /> 동의합니다.</label>
    </form>
</body>
</html>
작성자: 시간: 댓글 없음:
라벨:
피드 구독하기: 글 (Atom)