ex28

체크박스

코드

<body>
    <!-- ex28_check.html -->
    <h1>체크 박스</h1>

    <form name="form1">
        <input type="checkbox" name="cb1">
        <input type="button" value="확인" name="btn1">
    </form>

    <hr>

    <h1>회원 가입</h1>

    <h2>이용 약관</h2>

    <div style="width: 500px; height: 150px; overflow: auto; border: 1px solid black; padding:10px;">lorem500</div>
    <hr>
    <label>
        <input type="checkbox" name="cbagree">
        약관에 동의합니다.
    </label>
    <hr>
    <input type="button" value="다음 단계로" disabled name="btnnext" onclick="location.href='ex27_form.html';">

    <hr>

    <h1>받은 편지함</h1>

    <table border="1" width="500">
        <tr>
            <th><input type="checkbox" name="cball"></th>
            <th>번호</th>
            <th>제목</th>
            <th>보낸이</th>
            <th>날짜</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="cbitem"></td>
            <td>10</td>
            <td>안녕하세요. 광고메일입니다.</td>
            <td>홍길동</td>
            <td>2023-04-24</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cbitem"></td>
            <td>10</td>
            <td>안녕하세요. 광고메일입니다.</td>
            <td>홍길동</td>
            <td>2023-04-24</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cbitem"></td>
            <td>10</td>
            <td>안녕하세요. 광고메일입니다.</td>
            <td>홍길동</td>
            <td>2023-04-24</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cbitem"></td>
            <td>10</td>
            <td>안녕하세요. 광고메일입니다.</td>
            <td>홍길동</td>
            <td>2023-04-24</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cbitem"></td>
            <td>10</td>
            <td>안녕하세요. 광고메일입니다.</td>
            <td>홍길동</td>
            <td>2023-04-24</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cbitem"></td>
            <td>10</td>
            <td>안녕하세요. 광고메일입니다.</td>
            <td>홍길동</td>
            <td>2023-04-24</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cbitem"></td>
            <td>10</td>
            <td>안녕하세요. 광고메일입니다.</td>
            <td>홍길동</td>
            <td>2023-04-24</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cbitem"></td>
            <td>10</td>
            <td>안녕하세요. 광고메일입니다.</td>
            <td>홍길동</td>
            <td>2023-04-24</td>
        </tr>
    </table>

    <script>

        var cb1 = document.form1.cb1;
        
        document.form1.btn1.onclick = m1;

        function m1() {
            // cb1.checked = true;
            cb1.checked = !cb1.checked;
        }

        // cb1.onclick = m2;
        cb1.onchange = m2; //입력 컨트롤의 값이 변할 때 발생하는 이벤트(더 자주씀)

        function m2() {
            console.log(cb1.checked);
        }




        var cbagree = document.all.cbagree;
        var btnnext = document.all.btnnext;

        cbagree.onchange = m3;

        function m3() {
            if (cbagree.checked) {
                btnnext.disabled = false;
            } else {
                btnnext.disabled = true;
            }
        }


        var cball = document.all.cball;
        var cbitem = document.all.cbitem; //배열

        cball.onchange = m4;

        //전체 체크
        function m4() {
            // if (cball.checked) {
            //     for (var i=0;i<cbitem.length; i++) {
            //         cbitem[i].checked = true;
            //     }
            // } else {
            //     for (var i=0;i<cbitem.length; i++) {
            //         cbitem[i].checked = false;
            //     }
            // }

            //더 간단하게
            for (var i=0; i<cbitem.length; i++) {
                cbitem[i].checked = cball.checked;
            }
        }

    </script>
</body>
</html>

화면

Document

체크 박스

회원 가입

이용 약관

lorem500

약관에 동의합니다.

받은 편지함

번호	제목	보낸이	날짜
10	안녕하세요. 광고메일입니다.	홍길동	2023-04-24
10	안녕하세요. 광고메일입니다.	홍길동	2023-04-24
10	안녕하세요. 광고메일입니다.	홍길동	2023-04-24
10	안녕하세요. 광고메일입니다.	홍길동	2023-04-24
10	안녕하세요. 광고메일입니다.	홍길동	2023-04-24
10	안녕하세요. 광고메일입니다.	홍길동	2023-04-24
10	안녕하세요. 광고메일입니다.	홍길동	2023-04-24
10	안녕하세요. 광고메일입니다.	홍길동	2023-04-24

ex29

라디오 버튼

    <style>
        label { display: block; }
    </style>
</head>
<body>
    <!-- ex29_radio.html -->

    <h1>라디오 버튼</h1>

    <label><input type="radio" name="rb" value="white" checked>흰색</label>
    <label><input type="radio" name="rb" value="red">빨간색</label>
    <label><input type="radio" name="rb" value="yellow">노란색</label>
    <label><input type="radio" name="rb" value="blue">파란색</label>
    <label><input type="radio" name="rb" value="black">검은색</label>

    <script>

        var rb = document.all.rb;

        console.log(rb[0]);

        for (var i=0; i<rb.length; i++) {
            rb[i].onchange = m1;
        }

        function m1() {
            //5개의 라디오 버튼 중 누가 나를 불렀는지?
            // alert(event.target.value);
            document.body.bgColor = event.target.value;

            if (event.target.value == 'black' || event.target.value == 'red' || event.target.value == 'blue' ) {
                document.body.text = 'white';
            } else {
                document.body.text = 'black';
            }
        }

    </script>
</body>
</html>

화면

Document

라디오 버튼

흰색 빨간색 노란색 파란색 검은색

ex30

range

    <style>
        label {
            display: block;
            padding: 10px;
        }
        
        label input[type=range] {
            width: 300px;
        }
    </style>
</head>
<body>
    <!-- ex30_range.html -->

    <h1>배경색(RGB)</h1>

    <label>R: <input type="range" name="red" min="0" max="255" value="255"></label>
    <label>G: <input type="range" name="green" min="0" max="255" value="255"></label>
    <label>B: <input type="range" name="blue" min="0" max="255" value="255"></label>

    <script>
        var red = document.all.red;
        var green = document.all.green;
        var blue = document.all.blue;

        // onchange > 선택 완료되었을 때 반영
        // red.onchange = m1;
        // green.onchange = m1;
        // blue.onchange = m1;

        //oninput > 선택 끝나지 않아도 계속 반영
        red.oninput = m1;
        green.oninput = m1;
        blue.oninput = m1;

        function m1() {
            // console.log(red.value, green.value, blue.value);
            //BOM > HTML 태그의 속성 조작 가능 > HTML RGB 16진수만 지원

            //10진수 > 16진수
            // console.log(typeof red.value);
            // console.log(red.value, parseInt(red.value).toString(16));

            var r = parseInt(red.value).toString(16);
            var g = parseInt(green.value).toString(16);
            var b = parseInt(blue.value).toString(16);

            document.body.bgColor = '#' + r + g + b;
        }

    </script>
</body>
</html>

화면

배경색(RGB)

R: G: B:

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

[ex32] timer (0)	2023.04.27
[ex31] select (0)	2023.04.27
[ex27] form(유효성 검사) (0)	2023.04.26
[ex26] 요소(태그)의 이벤트 일괄처리 (0)	2023.04.26
[ex24~25] 롤오버 이미지, 메세지 박스 (0)	2023.04.26

🚀

[ex28~30] check, radio, range

체크 박스

회원 가입

이용 약관

받은 편지함

라디오 버튼

배경색(RGB)

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

티스토리툴바

[ex28~30] check, radio, range

체크 박스

회원 가입

이용 약관

받은 편지함

라디오 버튼

배경색(RGB)

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

'프로그래밍 공부/JavaScript' Related Articles

티스토리툴바