• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Style</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <script>
9
        $(function() {
10
            $("#check").change(function() {
11
                // checked 속성의 속성값을 반환함.
12
                $("#text").html("checked 속성의 속성값 : " + $(this).attr("checked")
13
                    + "<br>checked 프로퍼티 값 : " + $(this).prop("checked"));   // checked 프로퍼티 값을 반환함.
14
            }).change();    // 값이 변할 때마다 갱신함.
15
        });
16
    </script>
17
</head>
18
​
19
<body>
20
​
21
    <h1>.attr() 메소드와 .prop() 메소드와의 차이점</h1>
22
    <input id="check" type="checkbox" name="lecture" checked="checked">
23
    <label for="check">체크박스를 체크해 보세요!</label>
24
    <p id="text"></p>
25
26
</body>
27
​
28
</html>