고래씌

[JavaScript] 체크박스 실습문제 본문

Front-End/JavaScript

[JavaScript] 체크박스 실습문제

고래씌 2023. 11. 9. 11:14 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_기본문법_체크박스</title>
    <style>
        .area{
            width:500px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h1>Practice1</h1>

    <form>
        <fieldset>
            <legend>취미</legend>
            <input type="checkbox" name="kategorie" value="" onclick="allselect(checked)">
            <label>전체선택</label>
            <input type="checkbox" name="kategorie" value="종합" onclick="check()" id="kategorie1">
            <label>종합</label>
            <input type="checkbox" name="kategorie" value="소설" onclick="check()" id="kategorie2">
            <label>소설</label>
            <input type="checkbox" name="kategorie" value="시/에세이" onclick="check()" id="kategorie3">
            <label>시/에세이</label>
            <input type="checkbox" name="kategorie" value="경제/경영" onclick="check()" id="kategorie4">
            <label>경제/경영</label>
            <input type="checkbox" name="kategorie" value="자기계발" onclick="check()" id="kategorie5">
            <label>자기계발</label>
            <input type="checkbox" name="kategorie" value="아동" onclick="check()" id="kategorie6">
            <label>아동</label>
            <input type="checkbox" name="kategorie" value="여행" onclick="check()" id="kategorie7">
            <label>여행</label>
            <input type="checkbox" name="kategorie" value="과학" onclick="check()" id="kategorie8">
            <label>과학</label>
            <input type="checkbox" name="kategorie" value="역사/문화" onclick="check()" id="kategorie9">
            <label>역사/문화</label>
            <input type="checkbox" name="kategorie" value="외국어" onclick="check()" id="kategorie10">
            <label>외국어</label>
            <input type="checkbox" name="kategorie" value="컴퓨터" onclick="check()" id="kategorie11">
            <label>컴퓨터</label>
            <input type="checkbox" name="kategorie" value="만화" onclick="check()" id="kategorie12">
            <label>만화</label>
            
        </fieldset>
    </form>

    <br>

    <button onclick="search()">카테고리 검색</button>
    <div id="area3"  class="area"></div>

    <script>

        // bool = this.checked : 체크박스의 체크속성(true, false)
        function allselect(bool){
            var chks = document.getElementsByName("kategorie");
            for(var i=0; i<chks.length; i++){
                chks[i].checked = bool;
            }
        }

        // 다른 속성들 체크 해제시 전체선택도 체크 해제
        function check(){
            var chks = document.getElementsByName("kategorie");
            for(var i=0; i<chks.length; i++) {
                if(chks[i].checked == false) {
                    chks[0].checked = false;
                }
            }
        }



        function search(){
            var kategorie = document.getElementsByName("kategorie");

            var itembox = "";

            for(var i=0; i<kategorie.length; i++) {

                if(kategorie[i].checked) itembox += kategorie[i].value + " ";

            }



            area3.innerHTML = itembox;
        }
    </script>

</body>
</html>

 

 

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

'Front-End > JavaScript' 카테고리의 다른 글

[JavaScript] 6-1. 배열  (1) 2023.11.09
[JavaScript] 계산 실습문제  (0) 2023.11.09
[JavaScript] 5. 문자열과 숫자  (0) 2023.11.08
[JavaScript] 4. 변수와 자료형  (0) 2023.11.08
[JavaScript] 3. 요소선택  (0) 2023.11.08
'Front-End/JavaScript' Related Articles more