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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    
    function test() {
        var txt1 = document.getElementById("txt1"); //txt1찾기
        
        //입력값
        //txt1.value = "홍길동";
        //alert(txt1.value);
        
        txt1.readOnly = true;
        txt1.style.backgroundColor = "black";
        txt1.style.color = "white"; 
 
    
        var cb1 = document.getElementById("cb1"); //cb1찾기
        cb1.checked = true;
        
        
        //yes? no?
        var rb1 = document.getElementById("rb1");
        //alert(rb1.checked);
        rb1.checked = true;
        
        /* if (rb1.checked) {
            alert("yes");
        } else {
            alert("no");
        } */
        
        
        
        //텍스트 박스 -> 입력값? -> value
        //체크/라디오 -> 입력값? -> checked
        //셀렉트 박스 -> 입력값? -> value
                
        var sel1 = document.getElementById("sel1");
        //alert(sel1.value);
        //sel1.value = "300";
        
        //선택한 옵션의 index
        //alert(sel1.selectedIndex);
        //sel1.selectedIndex = 1;
        
        //옵션(배열)
        //alert(sel1.options.length);
        //alert(sel1.options[2].value);
        //alert(sel1.options[2].text);
        //alert(sel1.options[2].innerText);
        
        
        
        //추가
        //1. innerHTML
        //2. DOM
        //3.
        
        //<option value="400">사백</option>
        //var item = new Option("사백", "400"); 
        //sel1.options.add(item);
        
        
        
        //삭제
        //sel1.options.remove(2); //index = 2 옵션삭제
        //sel1.options.remove(0);
        
        //선택된 옵션을 삭제
        if (sel1.options.length > 1) {
            sel1.options.remove(sel1.selectedIndex);
        }
    }
    
        
    function test2() {
        //onchange -> value 속성을 가지고 있는 태그에만 적용(<form> 컨트롤에만)
        //    : 컨트롤의 입력값이 변경되는 순간 발생
        alert(event.srcElement.value);
    }
    
    function test3() {
        //체크박스를 클릭했을 때
        //alert("체크");
        //alert(event.srcElement.checked);
    }
    
    function test4() {
        alert(event.srcElement.checked);
    }
    
    function agree() {
        //약관 동의 체크박스 클릭할 때
        if (event.srcElement.checked) {
            document.getElementById("btnNext").disabled = false;
        } else {
            document.getElementById("btnNext").disabled = true;
        }
    }
    
    
    function copy() {
        
        var txtName1 = document.getElementById("txtName1");
        var txtAddress1 = document.getElementById("txtAddress1");
        var txtName2 = document.getElementById("txtName2");
        var txtAddress2 = document.getElementById("txtAddress2");
        
        if (event.srcElement.checked) {
            txtName2.value = txtName1.value;//복사
            txtAddress2.value = txtAddress1.value;
        } else { //체크를 해제하는 경우 
            txtName2.value = "";
            txtAddress2.value = "";
            txtName2.focus();
        }
        
    }
    
    
</script>
</head>
<body>
 
 
    <!-- ex20.htm -->
 
 
    <input type="button" value="테스트" onclick="test();" />
    <hr />
    
    <form name="form1" id="form1">
    
        <fieldset>
            <legend>주문하시는 분</legend>
            이름 : <input type="text" id="txtName1" /><br />
            주소 : <input type="text" id="txtAddress1" />
        </fieldset>
        
        <div style="margin:15px 0px;">
            <input type="checkbox" onchange="copy();" />주문하시는 분과 동일합니다.
        </div>
        
        <fieldset>
            <legend>받으시는 분</legend>
            이름 : <input type="text" id="txtName2" /><br />
            주소 : <input type="text" id="txtAddress2" />
        </fieldset>
        
        
        
        <hr />
        텍스트 박스 : <input type="text" id="txt1" />
        <br /><br />
        체크 박스 : <input type="checkbox" id="cb1" />
        <br /><br />
        라디오 버튼 : 
        <input type="radio" name="rb" id="rb1" value="y" /> yes
        <input type="radio" name="rb" id="rb2" value="n" checked="checked" /> no
        
        
        <br /><br />
        <select id="sel1">
            <option value="100">백</option>
            <option value="200">이백</option>
            <option value="300">삼백</option>
        </select>
        
    
        
        <hr />
        <input type="text" id="txt2" onchange="test2();" /><br />
        <input type="checkbox" id="cb2" onclick="test3();" onchange="test4();" />
    
    
        
        <hr />
        <h3>약관</h3>
         <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.
         내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.    </p>
        <input type="checkbox" onchange="agree();" /> 약관에 동의합니다.
        <br /><br />
        <input type="button" value="다음 단계로" id="btnNext" onclick="alert('다음 단계로 넘어감.,')" disabled="disabled" />
    
    </form>
    
 
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

문제] 주민번호 입력폼 구현하기  (0) 2016.01.22
회원정보 입력하기  (0) 2016.01.22
js test  (0) 2016.01.22
타이머  (0) 2016.01.22
버튼 찾아 css 제거하기  (0) 2016.01.22

+ Recent posts

티스토리툴바