이로

JS 체크박스 만들어보기 (+ jQuery구문으로 바꿔보기) 본문

컴퓨터/과제

JS 체크박스 만들어보기 (+ jQuery구문으로 바꿔보기)

利路 2019. 6. 19. 23:00
반응형

JS문으로 체크박스를 만들어보는 과제입니다.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>체크박스 실습</title>
</head>

<body>
    <!-- 체크박스 만들기 -->
    <!-- input[type=checkbox value=야구]*3 엔터 -> 3개생김 -->
    <input type=checkbox id='all' value='전체'> 전체
    <input type=checkbox id='야구' value='야구'> 야구
    <input type=checkbox id="농구" value='농구'> 농구
    <input type=checkbox id='축구' value='축구'> 축구
    <input type=checkbox id='볼링' value='볼링'> 볼링
    <input type=checkbox id='피구' value='피구'> 피구

    <!-- 텍스트 에리어 만들기 -->
    <textarea id="ta"></textarea>


    <script>
        // on load - 브라우저에 페이지(HTML)가 모두 로딩된 후 발생하는 이벤트
        window.onload = function () {
            //1. HTML 태그에 대한 참조를 얻는다.
            var inputArr = document.getElementsByTagName('input');
            var ta = document.getElementById('ta');
  
            // 전체 클릭시 체크박스 모두 체크하게 하기만 하면 된다. 그러면 아래 쿼리에서 자동으로 글 입력해 줄 것이다.
            // 0번째 체크시 포문으로 1~5까지 모두 체크드 값 트루로 바꾸고, 아니면 false로 바꾸자. 0은 전체니 1부터해야한다.
            // 전체가 트루로 바뀌어서 체크박스 열려도 글 안바뀐다. 따로 입력해줘야할듯하다.
            // 전체 체크 후 볼링 제외 하면 체크가 해제되어야 한다. 아래쪽에서 각 inputArr[i].checked=false인 값이 하나라도 있을 때 inputArr[0].checked=false로 해주면 된다.

            //전체 클릭시 모두 체크 또는 모두 체크해제하기
            inputArr[0].onclick = function () {
                let str = "";
                for (let i = 1; i < inputArr.length; i++) {
                    inputArr[i].checked = inputArr[0].checked;
                    str += inputArr[i].value + " ";
                    ta.innerText = str;
                }
                if (!(inputArr[0].checked)) {
                    ta.innerText = " ";
                }
                str = "";


            }
            //전체 클릭시에는 따로 생각해야하므로, 전체 제외하고 만들자. 인덱스 1부터! 잊지말기
            for (let i = 1; i < inputArr.length; i++) {
                inputArr[i].onclick = function () {
                    // 먼저 하나씩 해보자 왜 inputArr[i].value를 인식하지 못하지?? for문의 i를 let으로..
                    // str 에 체크해서 나온 값들 누적시키자.
                    // 한번 체크 할 때마다 전체 체크여부 확인해서 체크한 값만 값 반환하게 해 보자.
                    ta.innerText = "";
                    let str = ta.defaultValue;
                    for (let j = 1; j < inputArr.length; j++) {
                        if (inputArr[j].checked) {
                            str += inputArr[j].value + " ";
                            ta.innerText = str;
                        } else {
                            inputArr[0].checked = false;
                        }
                    }
                    str = "";
                    //alert(click);} 클릭하면 textarea에 value값을  넣는다.
                }
            }
        }
    </script>

</body>

</html>
  <!-- // 1. textarea에 대한 참조를 얻는다.
// ta.innerHTML(inputArr[0].value)
  dir 로 속성 까기 -->
    <!-- 참조 확인하기(이름만 입력) -->
<!--
        1. elemt 선택, (선택이 잘 되었나?)
        2. 이벤트 처리 (이벤트 등록이 잘 되었나?)
        
        1. 테이블 2개 만들기
        2. 좌측 테이블에 체크박스 만들기
        3. 좌측 테이블 체크박스 이벤트 클릭시 우측 테이블에 출력값 입력
        (Boolean으로 하면 될 것 같다. true시 add false시 remove)
    -->
    <!-- 화면 분할은 어떻게하지? -->

    <!--
    1. 먼저 체크 박스에 onchecked있나? 또는 onclick 이벤트 선택하자.
    2. 위 이벤트 발생시 textarea에 문자 출력하게 하자.
 -->

 

라이브러리를 잘 사용하면 된다고 하지만, 이렇게 기초적인것들을 만들면서 알고리즘 짜는 훈련을 해 보는것도 좋다고 하셔서 과제를 내 주셨습니다.

 

다음은 jQuery문으로 바꿔보았습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>

<body id='body'>
    <!-- 체크박스 만들기 -->
    <input type=checkbox id='all' value=''> 전체
    <input type=checkbox id='baseball' value='야구'> 야구
    <input type=checkbox id="basketball" value='농구'> 농구
    <input type=checkbox id='Soccer' value='축구'> 축구
    <input type=checkbox id='Bowling' value='볼링'> 볼링
    <input type=checkbox id='Dodgeball' value='피구'> 피구

    <!-- 텍스트 에리어 만들기 -->
    <textarea id="ta"></textarea>
    <script>
        $(document).ready(function () {
            // input객체에 이벤트 발생시
            $('#body>input').change(function () {
                // input 중 checked인것들 다 모으기
                var inputArray = $('#body>input:checked');
                var tmp = '';
                $.each(inputArray, function (index, item) {
                    // tmp+=item.value+' ';
                    tmp += inputArray.eq(index).val() + ' ';
                });
                $('#ta').text(
                    tmp
                )
                // all제외 선택자의 개수가 all제외 전체개수와 같거나크면 전체 선택
                // 아닐경우 전체 선택 해제
                if (inputArray.not('#all').length >= $('input').not('#all').length) {
                    $('#all').prop('checked', true);
                } else {
                    $('#all').prop('checked', false);
                }
            })
        })
        // all 클릭시 나머지 자손객체 체크 선택or해제
        $('#all').change(function () {
            if (this.checked) {
                $('#body').children().prop('checked', true);
            } else {
                $('#body').children().prop('checked', false);
            }
        })
    </script>
</body>

</html>

별로 차이가 나지않는듯 보이지만, 제 3자의 눈으로 보았을 때 jquery문으로 작성시 직관적으로 이해가 되는듯 합니다.

반응형
저작자표시 비영리 변경금지

'컴퓨터 > 과제' 카테고리의 다른 글

JSP 로그인 만들기 + 쿠키를 이용하여 id저장하  (1) 2019.06.21
JSP 로그인 요청한 곳으로 가게하기  (0) 2019.06.21
JS select의 option 옮기기  (0) 2019.06.18
짝 맞추기 게임 만들기  (0) 2019.06.16
'컴퓨터/과제' Related Articles more
Comments