[js] checkbox에 입력된 값을 읽고 출력(취미 체크)

연습용365 2021. 9. 8. 14:29

<!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"; }

ff.cb1.checked(확인하는 옵션)
갖고 온 인수(ff).이름(name).적힌 값(value)을 확인한다.
--> 모든 걸 확인해야 되니까 다섯개를 갖고 온다.

alert(msg);
--> 창에 뜨도록 출력
document.write(msg);
--> 페이지에 뜨도록 출력