<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form{ width:350px; }
</style>
<script>
function Check(ff){
var msg = "";
if(ff.cb1.checked) { msg += ff.cb1.value; + "\n"; }
if(ff.cb2.checked) { msg += ff.cb2.value; + "\n"; }
if(ff.cb3.checked) { msg += ff.cb3.value; + "\n"; }
if(ff.cb4.checked) { msg += ff.cb4.value; + "\n"; }
if(ff.cb5.checked) { msg += ff.cb5.value; + "\n"; }
alert(msg); //or document.write(msg);
}
</script>
</head>
<body>
<form>
<fieldset>
<legend>취미</legend>
<input type="checkbox" name="cb1" value="축구">축구
<input type="checkbox" name="cb2" value="배구">배구
<input type="checkbox" name="cb3" value="농구">농구
<input type="checkbox" name="cb4" value="등산">등산
<input type="checkbox" name="cb5" value="테니스">테니스<br>
<input type="button" value="확인" onclick="Check(this.form);">
<!-- 온클릭 : 이벤트 핸들러-->
</fieldset>
</form>
</body>
</html>
<input type="button" value="확인" onclick="Check(this.form);">
onclick="Check(this.form);" --> onclick 클릭 했을 때 this.form (form에 있는 모든 걸 가지고 가)
Check(this.form); 인수
Check(ff){ } 가인수
function Check(ff){ <--ff는 (this.form); 이 값 모두
var msg = "";
}
깨끗하게 비워놓고 시작
msg = msg + ff.cb1.value;
msg에 msg + ff.cb1.value; 이걸 넣어줌
줄이면 --> { msg += ff.cb1.value; + "\n"; }
function Check(ff){
var msg = "";
if(ff.cb1.checked) { msg += ff.cb1.value; + "\n"; }
if(ff.cb2.checked) { msg += ff.cb2.value; + "\n"; }
if(ff.cb3.checked) { msg += ff.cb3.value; + "\n"; }
if(ff.cb4.checked) { msg += ff.cb4.value; + "\n"; }
if(ff.cb5.checked) { msg += ff.cb5.value; + "\n"; }
}
ff.cb1.checked(확인하는 옵션)
갖고 온 인수(ff).이름(name).적힌 값(value)을 확인한다.
--> 모든 걸 확인해야 되니까 다섯개를 갖고 온다.
alert(msg);
--> 창에 뜨도록 출력
document.write(msg);
--> 페이지에 뜨도록 출력
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
| [js] eval을 이용해서 계산기 만드는 방법 (0) | 2021.09.08 |
|---|---|
| [js] select에서 단일 입력 및 출력(전공선택) (0) | 2021.09.08 |
| [js] radio 버튼 읽고 출력하기 (성별체크) (0) | 2021.09.08 |
| [js] 1차원, 2차원 배열(Array) 이해하기 (0) | 2021.09.07 |
| [js] While문 + Do While문 (0) | 2021.09.07 |
