각각의 checkbox 와 radiobutton 객체? 는 각각의 id와 value 값을 가지지만 이것들을
의미 상 묶어주기 위해서는 name="checkGroup", name="radioGroup" 으로 묶어줘야 한다.
(그렇게 해야 radio 버튼은 하나만 선택되며 checkbox는 다중 선택된 내용이 하나로 묶인다. )
이런 것들은 기존에 해왔던 방식인 document.getElementById(); 로 불러올 수 없고 (왜냐 , 여러 개이기 때문에!)
document.getElementsByName(); 으로 불러와서 처리해야 한다. 반환된 결과는 array값이다.
var radioArray = document.getElementsByName();
radioArray.checked() 체크드 속성을 활용하면 선택이 되었는지 안되었는지를 true, false 로 반환하고
radioArray.value()는 라디오버튼의 value 값을 반환한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test029.html</title>
<style type="text/css">
* {color: #223322; font-family: 맑은 고딕; font-weight: bold;}
.bnt {width: 100px; height: 40px; font-size: }
</style>
<script type="text/javascript">
function actionChoice()
{
//alert("함수호출");
//주의 엘리먼'츠' 이다. 반환되는 것은 배열형태이다!
var radioObj = document.getElementsByName("radioGroup");
//alert(radioObj); //--==>>[object NodeList]
//alert(radioObj.length); //--==>> 6
var msg="선택된 항목이 없습니다.";
for (var i = 0; i < radioObj.length; i++)
{
//alert(radioObj[i].checked); // true or false 반환한다.
if (radioObj[i].checked)
{
//alert(radioObj[i].value);
msg = "당신이 선택한 사이즈는 아이스크림 종류를 " + radioObj[i].value + "개 고를 수 있습니다.";
break;
}
}
alert(msg);
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>라디오 버튼, 체크박스 다루기</h2>
<form>
--사이즈 선택--<br><br>
<!-- name 이 같아야 하나로 묶이는 것이다. -->
<input type="radio" name="radioGroup" id="a" value="1"><label for="a">싱글(1가지 맛)</label><br>
<input type="radio" name="radioGroup" id="b" value="2"><label for="b">더블(2가지 맛)</label><br>
<input type="radio" name="radioGroup" id="c" value="3"><label for="c">파인트(3가지 맛)</label><br>
<input type="radio" name="radioGroup" id="d" value="4"><label for="d">쿼터(4가지 맛)</label><br>
<input type="radio" name="radioGroup" id="e" value="6"><label for="e">패밀리(6가지 맛)</label><br>
<input type="radio" name="radioGroup" id="f" value="8"><label for="f">하프갤런(8가지 맛)</label><br>
<button type="button" class="btn" onclick="actionChoice()">확인</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test030.html</title>
<style type="text/css">
* {color: #223322; font-family: 맑은 고딕; font-weight: bold;}
.btn {font-size: 16pt;}
</style>
<script type="text/javascript">
function actionChoice()
{
var checkArray = document.getElementsByName("checkGroup");
var msg="";
var flag = true;
for (var i = 0; i < checkArray.length; i++)
{
//alert(checkArray[i].checked);
if (checkArray[i].checked)
{
msg += checkArray[i].value + " ";
flag = false;
}
}
if (flag)
{
msg = "선택한 과목이 없습니다.";
alert(msg);
}
else
{
alert(msg);
}
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h2>라디오버튼, 체크박스 다루기</h2>
<form>
--과목선택--<br>
<input type="checkbox" name = "checkGroup" id="a" value="자바기초">
<label for="a">Java Beginning</label><br>
<input type="checkbox" name = "checkGroup" id="b" value="오라클">
<label for="b">Oracle</label><br>
<input type="checkbox" name = "checkGroup" id="c" value="자바심화">
<label for="c">Java Advanced</label><br>
<input type="checkbox" name = "checkGroup" id="d" value="웹 클라이언트">
<label for="d">Web Client</label><br>
<input type="checkbox" name = "checkGroup" id="e" value="웹APP 서버">
<label for="e">JSP/Sevlet</label><br>
<input type="checkbox" name = "checkGroup" id="f" value="프레임워트">
<label for="f">Framework</label><br><br><br>
<button type="button" class="btn" onclick="actionChoice()">선택 완료</button>
</form>
</div>
</body>
</html>'📚Study Note > 자바스크립트' 카테고리의 다른 글
| [ JAVASCRIPT ] 아이스크림 사이즈와 종류 선택하기 (0) | 2021.05.04 |
|---|---|
| [ JAVASCRIPT ] 로또 번호 받아가세용 (0) | 2021.05.04 |