코딩_javascript

javascript 전체 체크 박스 컨트롤

잠수콩 2024. 8. 22. 10:34
체크박스를 모두 선택하거나 해제할 수 있는 스크립트를 추가하여, 버튼 클릭 시 모든 체크박스의 상태를 토글(toggle)하는 기능을 구현해보겠습니다. 이를 위해 두 개의 버튼을 사용하여 "전체 선택"과 "전체 해제" 기능을 각각 수행하도록 하겠습니다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Example</title>
</head>
<body>
    <form action="">
        <div class="form">
            <div class="formgroup">
                <input type="checkbox" id="r1" value="아이템1">
                <label for="r1">아이템1</label>
            </div>
            <div class="formgroup">
                <input type="checkbox" id="r2" value="아이템2">
                <label for="r2">아이템2</label>
            </div>
            <div class="formgroup">
                <input type="checkbox" id="r3" value="아이템3">
                <label for="r3">아이템3</label>
            </div>
            <div class="formgroup">
                <input type="checkbox" id="r4" value="아이템4">
                <label for="r4">아이템4</label>
            </div>
            <div class="formgroup">
                <input type="checkbox" id="r5" value="아이템5">
                <label for="r5">아이템5</label>
            </div>
        </div>
    </form>
    <button class="btn-submit" onclick="fnSubmit();">선택 내용 확인</button>
    <button class="btn-select-all" onclick="selectAllCheckboxes();">전체 선택</button>
    <button class="btn-deselect-all" onclick="deselectAllCheckboxes();">전체 해제</button>

    <div class="result"></div>

    <script>
        function fnSubmit() {
            // 모든 체크박스를 선택합니다.
            var checkboxes = document.querySelectorAll("input[type=checkbox]");
            var results = [];

            // 각 체크박스를 순회하며 체크된 것만 결과에 추가합니다.
            for (var i = 0; i < checkboxes.length; i++) {
                var checkbox = checkboxes[i];
                if (checkbox.checked) {
                    results.push(checkbox.value);
                }
            }

            // 결과를 쉼표로 구분하여 출력합니다.
            document.querySelector(".result").textContent = results.join(', ');
        }

        function selectAllCheckboxes() {
            // 모든 체크박스를 선택합니다.
            var checkboxes = document.querySelectorAll("input[type=checkbox]");
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = true;
            }
        }

        function deselectAllCheckboxes() {
            // 모든 체크박스 선택을 해제합니다.
            var checkboxes = document.querySelectorAll("input[type=checkbox]");
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = false;
            }
        }
    </script>
</body>
</html>​



출처 : 나

 

저작자표시