이러한 버튼을 만들고 체크를 누르면 내가 누른 버튼의 값을 출력하려고 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>성별체크</title>
<script>
function test_sample(){
var sample = document.getElementsByName("flower");
for(var i=0; i<sample.length; i++){
if(sample[i].checked == true) { alert(sample[i].value); } //괄호 해도 안 해도 ㄱㅊ
}
}
</script>
</head>
<body>
<form>
<legend>성별</legend>
<input type="radio" name="flower" value="여자">여자<br>
<input type="radio" name="flower" value="남자">남자<br>
<input type="button" value="체크" onclick="test_sample();">
</form>
</body>
</html>1. 가장 먼저 해줘야 할 것은 체크 박스 틀을 만드는 일이다. 지금까지 배운대로 <form>으로 틀을 만들고 사용자가 입력할 수 있는 버튼과 확인(체크) 버튼을 만든다.
<form>
<legend>성별</legend>
<input type="radio" name="flower" value="여자">여자<br>
<input type="radio" name="flower" value="남자">남자<br>
<input type="button" value="체크" onclick="test_sample();">
</form>그 영역이 여기에 해당하는 것이다.
<input type="radio" name="flower" value="여자">여자<br>
name을 설정 (flower)
value 값은 첫화면에서 사용하는 것이 아니라. 함수에 들어가서 반환될 용도로 만든 것이다.
<input type="button" value="체크" onclick="test_sample();">
onclick 클릭하면 test_sample(); <- 이 함수를 불러와라
2. 입력한 것을 받아들여서 계산한 뒤 출력을 하기 위해서는 함수가 필요하다. 그 함수는 위에서 선언을 했던 test_sample()
function test_sample(){
var sample = document.getElementsByName("flower");
for(var i=0; i<sample.length; i++){
if(sample[i].checked == true) { alert(sample[i].value); } //괄호 해도 안 해도 ㄱㅊ
}
}
var sample = document.getElementsByName("flower");
가져오는 함수 getElementsByName(); 겟엘리먼트바이네임
반드시 대소문자 구분해줘야됨
-> flower를 가져와서 모두 sample에 넣음
for(var i=0; i<sample.length(샘플이라는 변수의 길이 만큼 돌아라); i++)
여기서는 샘플이 2개, 만약 5개를 만들면 5개가 되는 것
if(sample[i].checked == true)
sample[i] 위에서 가져 온 샘플 번호
checked 체크를 하기 위한 명령어로 이미 정해져 있음
샘플에 값이 있다면 트루이다.
alert(sample[i].value);
그 선택된 값을 alert창(경고창)에 보여줘
(여자, 남자) 둘 중에 하나 창을 보여준다.
그래서 위에서 input value="" 이걸 정했던 것
alert(sample[i].value);alert창에 출력
if(sample[i].checked == true) alert(sample[i].value); 괄호 안 해줘도 됨
document.write(sample[i].value);새로운 페이지에 출력
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
| [js] select에서 단일 입력 및 출력(전공선택) (0) | 2021.09.08 |
|---|---|
| [js] checkbox에 입력된 값을 읽고 출력(취미 체크) (0) | 2021.09.08 |
| [js] 1차원, 2차원 배열(Array) 이해하기 (0) | 2021.09.07 |
| [js] While문 + Do While문 (0) | 2021.09.07 |
| [js] 중첩 for문 - 별찍기 (0) | 2021.09.07 |
