[jQuery] attr, prop, not - input[type='checkbox'] 체크박스 제어

jQuery
[jQuery] attr, prop, not - input[type='checkbox'] 체크박스 제어

힘없는염소 2014. 12. 24. 14:57
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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <script src="js/jquery.js"></script>
    <title>attr, prop</title>
</head>
<body>
    
    <input type="checkbox" checked="checked" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" checked="checked" />
 
    <script>
 
        // prop는 dom객체 속성(Property)으로 접근
        // attr는 html 마크업 속성(Attribute)으로 접근
 
        $("input[type='checkbox']").prop({
            "disabled":true
        });
        console.log($("input[type='checkbox']").eq(0).prop("checked")); // true
        console.log($("input[type='checkbox']").eq(0).attr("checked"));   // checked
        
        $("input[type='checkbox']").eq(1).prop("checked", true);
                
        console.log($("input[type='checkbox']").filter(':checked').size()); // 체크된 갯수 3
        console.log($("input[type='checkbox']").not(':checked').length);   // 체크되지 않은 갯수 1
 
        console.log($("input[type='checkbox']").eq(2).is(':checked'));     // false   // 체크여부 판단
        console.log($("input[type='checkbox']").eq(2).prop('checked'));   // false
        
        
        // 객체의 Property 수정시 prop 사용
        var obj = {};
        obj.value = "방갑다.";
        console.log(obj.value);
        $(obj).prop('value', '수정되었어요');
        console.log(obj.value);
        console.log($(obj).prop('value'));
        
    </script>
 
</body>
</html>
저작자표시 (새창열림)