<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test028.html</title>
<style type="text/css">
*{font-family:맑은 고딕; font-weight:bold;}
.btn{width:100px; height:40px; font-size:20px;}
.btn:hover{color:orange};
</style>
<script type="text/javascript">
function actionChoice()
{
/* var a= document.getElementById("a").value;
alert(a);
*/
var radioObj=document.getElementsByName("radioGroup"); //name 가져올땐 Elements가 붙고 ByName이 붙는다
//또한 배열객체 형식으로 얻어온다.
// --object NodeList -->자바스크립트 배열
//alert(radioObj.length); // -> 6
var msg="선택한 사이즈가 없습니다.";
for(var i=0; i<radioObj.length; i++) //0 1 2 3 4 5
{
//테스트
//alert(radioObj[i].checked); //checked속성을 찍어보겠다는 의미. 0부터 시작(배열이므로) 만약 하프갤런에 check되어있으면 true값 반환
//ex)동의하시겠습니까 물어볼때 (약관사항 같은 경우) == checked속성 이용
if(radioObj[i].checked)
{
msg="당신이 선택한 사이즈는 아이스크림 종류를"+radioObj[i].value+"개 골라 담을 수 있습니다.";
break;
}
}
alert(msg);
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>라디오버튼, 체크박스 다루기</h2>
<form>
---- 사이즈 선택 ----<br><br>
<input type="radio" name="radioGroup" value="1" id="a"><label for="a">싱글(1)</label><br>
<input type="radio" name="radioGroup" value="2" id="b"><label for="b">더블(2)</label><br>
<input type="radio" name="radioGroup" value="3" id="c"><label for="c">파인트(3)</label><br>
<input type="radio" name="radioGroup" value="4" id="d"><label for="d">쿼터(4)</label><br>
<input type="radio" name="radioGroup" value="5" id="e"><label for="e">패밀리(6)</label><br>
<input type="radio" name="radioGroup" value="6" id="f"><label for="f">하프갤런(8)</label><br>
<br>
<button type="button" class="btn" onclick="actionChoice()" >확인</button>
</form>
</div>
</body>
</html>