<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test030.html</title>
<style type="text/css">
hr{ border:none; border:2px dashed pink; }
* {color: #334433; }
input{font-family: 나눔고딕코딩; font-weight: bold;}
input:focus {background-color: #eeeedd;}
.btn {width: 80px; font-weight: bold; font-family: 맑은 고딕}
.btn:hover {color: orange;}
td {text-align: center; background: pink;}
.txt {text-align: center; border-radius: 4px;}
.txtScore {text-align: right; border-radius: 4px;}
.txtResult {color: red;}
textarea {font-family: 나눔고딕코딩; font-weight: bold;}
</style>
<script type="text/javascript">
var defaultCount = 0;
var userCount = 0;
function countSet(num)
{
//alert("함수 호출 확인");
//alert(num);
defaultCount = parseInt(num);
}
function actionChoice(obj)
{
//alert("함수 호출 확인");
//alert(obj.checked);
//--==>> true / false → 클릭 액션에 의해 check 되었을 때 true
// check 해제 되었을 때 false
if(obj.checked)
{
if (userCount >= defaultCount)
{
alert("선택할 수 있는 갯수를 초과하였습니다.");
obj.checked = false;
return;
}
//alert("체크 확인");
//사용자의 선택 갯수(userCount)를 1 만큼 증가
userCount++;
}
else
{
//alert("체크 해제");
//사용자의 선택갯수(userCount)를 1만큼 감소
userCount--;
}
//alert(userCount + " / " + defaultCount);
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr style="width: 300px " align="left">
</div>
<div>
<h2>아이스크림 주문</h2>
<form>
---- 사이즈 선택 ----<br>
<input type="radio"name="radioGroup" value="1" id="a" onclick="countSet(1)">
<label for="a">싱글(1)</label><br>
<input type="radio"name="radioGroup" value="2" id="b" onclick="countSet(2)">
<label for="b">더블(2)</label><br>
<input type="radio"name="radioGroup" value="3"id="c" onclick="countSet(3)">
<label for="c">파인트(3)</label><br>
<input type="radio"name="radioGroup" value="4"id="d" onclick="countSet(4)">
<label for="d">쿼터(4)</label><br>
<input type="radio"name="radioGroup" value="6"id="e" onclick="countSet(6)">
<label for="e">패밀리(6)</label><br>
<input type="radio"name="radioGroup" value="8"id="f" onclick="countSet(8)">
<label for="f">하프갤런(8)</label><br>
<br>
<hr style="width: 300px " align="left">
---- 종류 선택 ----<br>
<input type="checkbox"name="checkGroup" value="엄마" id="aa" onclick="actionChoice(this)">
<label for="aa">엄마는 외계인</label><br>
<input type="checkbox"name="checkGroup" value="봉봉" id="bb" onclick="actionChoice(this)">
<label for="bb">아몬드 봉봉</label><br>
<input type="checkbox"name="checkGroup" value="민트"id="cc" onclick="actionChoice(this)">
<label for="cc">민트초코칩</label><br>
<input type="checkbox"name="checkGroup" value="아몬"id="dd" onclick="actionChoice(this)">
<label for="dd">피스타치오 아몬드</label><br>
<input type="checkbox"name="checkGroup" value="뉴욕"id="ee" onclick="actionChoice(this)">
<label for="ee">뉴욕 치즈케익</label><br>
<input type="checkbox"name="checkGroup" value="아빠"id="ff" onclick="actionChoice(this)">
<label for="ff">아빠는 딸바봉</label><br>
<input type="checkbox"name="checkGroup" value="체리"id="gg" onclick="actionChoice(this)">
<label for="gg">체리쥬빌레</label><br>
<input type="checkbox"name="checkGroup" value="슈팅"id="hh" onclick="actionChoice(this)">
<label for="hh">슈팅스타</label><br>
<hr style="width: 300px " align="left">
<br>
<button type="button" class="btn"onclick="actionChoice()">주문</button>
</form>
</div>
</body>
</html>