1. Goal
- 3개의 Checkbox중 하나도 선택하지 않을 시 안내메시지 출력
- Checkbox 체크 상태에 따라 각각의 이미지 출력
2. Using
- HTML
- JavaScript
3. Source Code
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>젊은이여 그대의 이름을 가치있게 하라</title>
<script type="text/javascript">
function CheckForm(Join){
var ch1 = document.input.pro1.checked;
var ch2 = document.input.pro2.checked;
var ch3 = document.input.pro3.checked;
if(!(ch1+ch2+ch3)){
alert('상품을 선택해주세요');
return false;
}
}
function info(){
var ch1 = document.input.pro1.checked;
var ch2 = document.input.pro2.checked;
var ch3 = document.input.pro3.checked;
ss = document.getElementById('imgs');
if(ch1){
ss.src = "../images/s.JPG";
}
if(ch2){
ss.src = "../images/m.JPG";
}
if(ch3){
ss.src = "../images/l.JPG";
}
}
</script>
<style type="text/css">
.picture_style{
height:100px;
width:100px;
}
</style>
</head>
<body>
<form name="input" method = "POST" onSubmit="return CheckForm(this)">
<h2>상품주문하기</h2>
<ul onClick="info(this)">
<img id="imgs" src="../images/s.JPG" alt="랍스타 사진" class= picture_style>
<label style="cursor:pointer"><li><input type="checkbox" id="pro1" value="s">랍스터 500g </li></label>
<label style="cursor:pointer"><li><input type="checkbox" id="pro2" value="m" >랍스터 1kg </li></label>
<label style="cursor:pointer"><li><input type="checkbox" id="pro3" value="l">랍스터 2kg </li></label>
</ul>
<h2>사은품 선택</h2>
<ul>
<label style="cursor:pointer"><li><input type ="radio" name="freebies" value="scissors">가위</li></label>
<label style="cursor:pointer"><li><input type ="radio" name="freebies" value="tongs">집게</li></label>
</ul>
<input type="submit" value="주문">
</form>
</body>
</html>
|
cs |
4. Explanation
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<body>
<form name="input" method = "POST" onSubmit="return CheckForm(this)">
<h2>상품주문하기</h2>
<ul onClick="info(this)">
<img id="imgs" src="../images/s.JPG" alt="랍스타 사진" class= picture_style>
<label style="cursor:pointer"><li><input type="checkbox" id="pro1" value="s">랍스터 500g </li></label>
<label style="cursor:pointer"><li><input type="checkbox" id="pro2" value="m" >랍스터 1kg </li></label>
<label style="cursor:pointer"><li><input type="checkbox" id="pro3" value="l">랍스터 2kg </li></label>
</ul>
<h2>사은품 선택</h2>
<ul>
<label style="cursor:pointer"><li><input type ="radio" name="freebies" value="scissors">가위</li></label>
<label style="cursor:pointer"><li><input type ="radio" name="freebies" value="tongs">집게</li></label>
</ul>
<input type="submit" value="주문">
</form>
</body>
|
cs |
내일 인터넷으로 주문한 랍스터가 오기 때문에 매우 간단한 랍스터 주문 페이지를 설계하였다.
6번 라인 <label>태그의 style을 "cursor:pointer"로 설정하여 사용자가 checkbox부분에 커서를 올릴 시 손가락표시로
바뀌도록 하였다.
손가락표시는 아래와 같이 친숙하게 출력된다.
<img> 태그를 사용해 페이지의 기본 이미지를 설정해 주었다.
또한 <label>태그 내에 <li>와 <input>태그를 삽입해 줌으로 써 사용자가 체크박스가 아닌 label
글씨를 클릭해도 체크가 되도록 하였다.
추가로 꼴에 사은품도 추가해보았다.
<form name="input" method = "POST" onSubmit="return CheckForm(this)">
submit가 수행되었을 때 form의 데이터를 어디론가 보낸다는 가정을 위해 method="POST"를 사용하였다.
onSubmit는 아랫부분에 <input type="submit" value ="주문"> 코드를 이용해 만든 주문이라는submit 버튼이 눌러졌을 때 CheckForm(this)라는 함수를 실행한다.
여기서 this는 메소드가 호출된 인스턴스(객체)를 말한다. 즉, form이다.
|
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
|
<script type="text/javascript">
function CheckForm(Join){
var ch1 = document.input.pro1.checked;
var ch2 = document.input.pro2.checked;
var ch3 = document.input.pro3.checked;
if(!(ch1+ch2+ch3)){
alert('상품을 선택해주세요');
return false;
}
}
function info(){
var ch1 = document.input.pro1.checked;
var ch2 = document.input.pro2.checked;
var ch3 = document.input.pro3.checked;
ss = document.getElementById('imgs');
if(ch1){
ss.src = "../images/s.JPG";
}
if(ch2){
ss.src = "../images/m.JPG";
}
if(ch3){
ss.src = "../images/l.JPG";
}
}
</script>
|
cs |
자바스크립트 언어를 사용하여 함수를 정의해준다.CheckForm 함수를 간단히 설명하겠다.
4번 라인의 document.input.pro1.checked 구문은 html(document) 부분의 name이 input인 태그 내에서 pro1이라는 id를 가진 변수의 check여부를 ch1이라는 변수에 넣는다란 의미이다.
(check = True, no check = False)
세개의 checkbox 모두 위와같이 설정해주고, checkbox가 하나도 선택되지 않을 경우 alert메소드를 이용해
'상품을 선택해주세요' 라는 메시지를 출력시킨다.
위와 같은 메시지가 출력되었을 때에는 submit가 되지 않도록 하기 위해 return을 false로 한다.
info 함수는 처음부분 위와 동일하다.
20번 라인의 ss = document.getElementById('imgs')에서 getElementById는 id값을 참초할 수 있도록 해주는 메소드이다. 즉, ss라는 변수가 랍스터 사진을 출력시키는 id인 imgs를 참조할 수 있도록 한다.
21번 라인의 if(ch1)는 ch1 체크박스가클릭되었을 때 s.JPG라는 이미지를 imgs의 src 속성에 대입시키게 되고, 이미지가 출력되도록 한다.
5. Result
'프론트엔드 > 기타' 카테고리의 다른 글
| [WEB] Ajax 통신 시 한글 깨짐 현상(???, 특수문자) (0) | 2019.08.19 |
|---|---|
| [WEB] Servlet - Ajax 통신하기(이클립스, tomcat, web.xml) (0) | 2019.08.19 |
| [WEB] 3. 회원가입 비밀번호 조건 및 일치 여부 확인 2 (0) | 2019.06.04 |
| [WEB] 2. 회원가입 비밀번호 조건 및 일치 여부 확인 1 (2) | 2019.06.04 |