JS

221230 JS 속성제어 실습3

주영재 2022. 12. 30. 15:22 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="checkbox" name="seat" value="1">1번
    <input type="checkbox" name="seat" value="2">2번
    <input type="checkbox" name="seat" value="3">3번
    <input type="checkbox" name="seat" value="4">4번
    <input type="checkbox" name="seat" value="5">5번
    <input type="checkbox" name="seat" value="6">6번
    <input type="checkbox" name="seat" value="7">7번
    <input type="checkbox" name="seat" value="8">8번
    <input type="checkbox" name="seat" value="9">9번

    <button type="button" id="btn">클릭</button>

    <script>
        //버튼을 클릭시, 좌석이 적어도 한개이상 체크되어있지 않다면 경고창을 띄우세요.

        var arr = document.getElementsByName("seat");
        //var arr=document.querySelectorAll("input[name='seat']");
        var btn = document.getElementById("btn");

        btn.addEventListener("click", function () {
            var sum = 0;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].checked) {
                    sum++;
                }
            }

            if (sum == 0) {
                alert('좌석을 체크하세요');
                btn.innerHTML = '선택';
            } else {
                btn.innerHTML = '완료';
            }


        });

    </script>



</body>

</html>