1. Checkbox

- 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">                                                       
    <title>Document</title>
    <script>
        function output(form) {
            var a = "당신의 취미는 \n";
            if (form.check1.checked) {   // checked 속성 확인
                a += form.check1.value + "\n";
            }
            if (form.check2.checked) {   // checked 속성 확인
                a += form.check2.value + "\n";
            }
            if (form.check3.checked) {   // checked 속성 확인
                a += form.check3.value + "\n";
            }
            if (form.check4.checked) {   // checked 속성 확인
                a += form.check4.value + "\n";
            }
            if (form.check5.checked) {   // checked 속성 확인
                a += form.check5.value + "\n";
            }
 
            alert(a);
        }
    </script>
</head>
<body>
    <form>
        <h2>당신의 취미는 무엇인가요?</h2>
        <input type="checkbox" name="check1" value="게임">1. 게임 <br>
        <input type="checkbox" name="check2" value="독서">2. 독서 <br>
        <input type="checkbox" name="check3" value="영화감상">3. 영화감상 <br>
        <input type="checkbox" name="check4" value="음악감상">4. 음악감상 <br>
        <input type="checkbox" name="check5" value="축구">5. 축구 <br><br>
        <input type="button" value="선택" onclick="output(form)">
    </form>
</body>
</html>

- 실행 화면

2. Radio

- 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">                                                        
    <title>Document</title>
    <script>
        function output(form) {
            for (var i = 0; i < form.hobby.length; i++) {
                if (form.hobby[i].checked) {   // 선택되어 있으면
                    alert("당신의 취미는 : " + form.hobby[i].value + "\n");
                }
            }
        }
    </script>
</head>
<body>
    <form>
        <h2>당신의 취미는 무엇인가요?</h2>
        <input type="radio" name="hobby" value="게임">1. 게임 <br>
        <input type="radio" name="hobby" value="독서">2. 독서 <br>
        <input type="radio" name="hobby" value="영화감상">3. 영화감상 <br>
        <input type="radio" name="hobby" value="음악감상">4. 음악감상 <br>
        <input type="radio" name="hobby" value="축구">5. 축구 <br><br>
        <input type="button" value="선택" onclick="output(form)">
    </form>
</body>
</html>

- 실행 화면

3. Select

- 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function output(form) {
            var str = "선택 : ";
            for (var i = 0; i < form.hobby.length; i++) {
                if (form.hobby.options[i].selected==true) {
                    str += form.hobby.options[i].text + "\n";   // value가 아닌 text로 불러온다.                                      
                }
            }
            alert(str);
       }
    </script>
</head>
<body>
    <form>
        <h2>당신의 취미는 무엇인가요?</h2>
        <form name = "form">
            <select name = "hobby">
                <option value="게임">게임</option>
                <option value="독서">독서</option>
                <option value="영화감상">게임</option>
                <option value="음악감상">음악감상</option>
                <option value="축구">축구</option>
            </select>
            <input type="button" value="선택" onclick="output(form)">
        </form>
    </form>
</body>
</html>

- 실행 화면

728x90

그리드형(광고전용)

저작자표시 비영리

'Source Code > JavaScript' 카테고리의 다른 글

[JavaScript] 특정 요소를 새로운 새로운 창으로 띄우기 (0)	2022.05.12
[JavaScript] 디데이 카운터(D-Day Counter) 만들기 (0)	2022.05.09
[JavaScript] 공백이 검색되지 않도록 하기 (검색창 구현) (0)	2022.04.27
[JavaScript] Scroll Indicator 구현하기 (0)	2022.04.12
이벤트 객체 (Event Object) (0)	2017.05.21
this를 사용한 이벤트 (0)	2017.05.21
이벤트 등록 메서드가 브라우저별로 서로 다르게 실행되도록 하기 (0)	2017.05.21
이벤트 (Event) (0)	2017.05.21