1. 라디오버튼 객체
- <input type="radio">로 만들어진 라디오 버튼 DOM 객체
- 라디오 버튼 객체들 알아내기
2. 체크박스 객체
- <input type="checkbox">로 만들어진 체크박스 DOM 객체
|
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
|
<!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 findChecked(){
find = null;
kcity = document.getElementsByName("city");
for(i=0;i<kcity.length;i++){
if(kcity[i].checked==true){
find = kcity[i];
}
}
}
</script>
</head>
<body>
<h3>버튼을 클릭하면 선택된 라디오 버튼의 value 호출</h3><hr>
<form>
<input type="radio" name="city" value="seoul" checked>서울
<input type="radio" name="city" value="busan">부산
<input type="radio" name="city" value="chunchen">춘천
<input type="button" value="find checked" onclick="findChecked()">
</form>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
3. 체크박스로 선택한 물품 계산
|
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>
var sum = 0;
function calc(box){
if(box.checked){//checked : true of false
}else{
}
document.getElementById("sum").value = sum;
}
</script>
</head>
<body>
<h3>물품을 선택하면 자동으로 계산</h3>
<form>
<input type="checkbox" name="hap" onclick="calc(this)" value="10000">모자 1만원
<input type="checkbox" name="shose" onclick="calc(this)" value="30000">구두 1만원
<input type="checkbox" name="bag" onclick="calc(this)" value="80000">가방 1만원<br>
합계 : <input id="sum" value="0">
</form>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
'화면구현' 카테고리의 다른 글
| 윈도우 열기 (0) | 2020.03.16 |
|---|---|
| 계산기 만들기 (0) | 2020.03.12 |
| onblur와 onfocus (0) | 2020.03.12 |
| 마우스 핸들링, oncontextmenu, 이미지 로드, onload, new Image() (0) | 2020.03.12 |
| 이벤트 (0) | 2020.03.12 |
rss