[JavaScript] 체크박스 전체 선택 - Sample[JavaScript] 체크박스 전체 선택 - Sample

Posted at 2019. 12. 19. 11:34 | Posted in JavaScript & jQuery/JavaScript




■ 전체영역을 선택하는 체크박스 샘플 코드




# 소스코드

<html>

<head>

<title>:: JavaScript 체크박스 ::</title>

<script type="text/javascript">


    // @command 전체선택

    function allCheckedBox(obj) {


        // @brief 선택한 체크박스의 클래스 명칭을 가져온다.

        const termClassobj.getAttribute("class");


        // @brief 선택한 클래스명과 같은 클래스의 갯수

        console.log(document.getElementsByClassName(termClass).length);


        Array.prototype.forEach.call(document.getElementsByClassName(termClass), function(element, index, array) {


            // @brief 엘리먼트의 값 출력

            console.log(element.value);


            // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 되있는 경우

            if(document.getElementsByClassName(termClass)[0].checked == true) {


                // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 완료 처리 한다.

                element.checked = true;

            }


            // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 해제된 경우

            else {


                // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 해제 처리 한다.

                element.checked = false;

            }

        });

    }


    // @command 개별 선택이 이루어진 경우에 전체값 체크의 예외처리

    function eachCheckedBox(obj) {


        // @brief 선택한 체크박스의 상태가 선택해제인 경우

        if(obj.checked == false) {


            // @brief 선택한 체크박스의 클래스 명칭을 가져온다.

            const termClass = obj.getAttribute("class");


            // @brief 첫번째 checkbox의 상태가 체크가 되어있는경우

            if(document.getElementsByClassName(termClass)[0].checked == true) {


                // @brief 첫번째 checkbox의 상태를 체크해제한다.

                document.getElementsByClassName(termClass)[0].checked = false;

            }

        }

    }

</script>

</head>

<body>

     <h1>■ 체크박스 전체 선택 - SAMPLE</h1>


    <!-- @brief 전체의 선택의 경우 반드시 index값이 0인 첫번째에 위치해야 한다. -->

    <label>

        <input type="checkbox" class="neHeros" value="" onChange="allCheckedBox(this);"/>&nbsp;전체

    </label>


    <!-- @brief 개별선택될 체크박스들 -->

    <label>

        <input type="checkboxclass="neHeros" value="D" onChange="eachCheckedBox(this);"/>&nbsp;데몬헌터

    </label>

    <label>

        <input type="checkboxclass="neHeros" value="W" onChange="eachCheckedBox(this);"/>&nbsp;워든

    </label>

    <label>

        <input type="checkboxclass="neHeros" value="K" onChange="eachCheckedBox(this);"/>&nbsp;키퍼 오브 더 그루브

    </label>

    <label>

        <input type="checkboxclass="neHeros" value="P" onChange="eachCheckedBox(this);"/>&nbsp;프리시스 오브 더 문

    </label>

</body>

</html>




# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기