스노우보드 참 좋아하는데 맨날 키보드 앞에만 있네

[jQuery] 체크박스 실습 본문

개발/Javascript

[jQuery] 체크박스 실습

워너-비 2017. 11. 6. 15:46

jQuery를 이용하여 체크박스 다루기



jQuery를 이용하여 Checkbox, Textarea, Button 을 다루는 실습을 해보자



소스코드

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
<html>
 
<head>
    <title>jQuery를 이용하여 체크박스 다루기</title>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
 
    <script>
        function allSelect() {
            $("input[type='checkbox']").prop('checked', true);
        }
 
        function unSelect() {
            $("input[type='checkbox']").prop('checked', false);
        }
 
        function check() {
            var checkArr = [];
            $("input[type='checkbox']:checked").each(function () {
                checkArr.push($(this).val());
            });
 
            $("textarea").val(checkArr);
        }
        
        
        $(document).ready(function () {
            $("input[type='checkbox']").on("change", function () {
                check();
            });
            
            $("input[type='button']").on("click", function () {
                check();
            });
        });
    </script>
</head>
 
<body>
    <h3>jQuery를 사용하여 다음을 구현하라</h3>
    <hr>
    <ol>
        <li>checkbox, textarea, button 생성</li>
        <li>'전체 선택' 클릭 시 모든 checkbox를 checked 상태로 변경</li>
        <li>'선택 해제' 클릭 시 모든 checkbox를 unchecked 상태로 변경</li>
        <li>checkbox가 checked 상태이면, value 값을 textarea에 모두 출력</li>
    </ol>
    <hr>
 
    <input type="button" onclick="allSelect();" value="전체 선택" />
    <input type="button" onclick="unSelect();" value="선택 해제" />
    <br><br>
    <input type="checkbox" value="축구" /> 축구<br>
    <input type="checkbox" value="야구" /> 야구<br>
    <input type="checkbox" value="농구" /> 농구<br>
    <input type="checkbox" value="당구" /> 당구<br>
    <input type="checkbox" value="피구" /> 피구<br>
    <input type="checkbox" value="탁구" /> 탁구<br>
<br>
    <textarea rows="2" cols="20"></textarea>
</body>

</html>




결과



'개발 > Javascript' 카테고리의 다른 글

네이버 스마트에디터 (SmartEditor2)를 이용한 글쓰기 기능 구현  (4) 2018.01.16
[JavaScript] 메서드 체이닝(Method Chaining)와 filter(), end()  (0) 2017.11.06
[JavaScript / ECMAScript6] 전개 연산자(바벨)를 사용한 배열 복사와 병합  (0) 2017.10.31
[JavaScript] 참조 복사와 값 복사 (얕은 복사와 깊은 복사)  (1) 2017.10.31
[JavaScript] 객체(Object)  (1) 2017.10.31
공유하기 링크
'개발/Javascript' Related Articles more
Comments