WEB Archive
[HTML] Javascript - checkbox 체크박스 name 속성 부여
universedevelope
2024. 8. 21. 14:17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test029.html</title>
<style type="text/css">
/* 나의 스타일.. 명령 프롬프트 */
*
{
background-color: white;
font-family: 나눔고딕코딩;
font-size: 20pt;
color: #ababab;
font-weight: bold;
}
h1
{
font-size: 40pt;
color: #ababab;
margin: 0%;
}
hr
{
background-color: #ababab;
height: 15px;
}
input.btn
{
background-color: black;
width: 250px;
text-align: center;
}
input.btn:hover
{
background-color: red;
color: white;
}
input.txtbox
{
width: 100px;
text-align: center;
}
input.txtbox:hover
{
background-color: blue;
color: white;
}
</style>
<script type="text/javascript">
function actionChoice()
{
// 확인
// alert("함수 호출 확인 ~ !!!");
var checkObj = document.getElementsByName("checkGroup");
var msg = "";
var flag = true;
// 확인
//alert(checkObj); [object NodeList]
//alert(checkObj.length); 6
for (var i = 0; i < checkObj.length; i++)
{
// 확인
//alert(checkObj[i].checked);
if (checkObj[i].checked)
{
msg += checkObj[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><br>
<input type = "checkbox" id = "a" name = "checkGroup" value = "자바기초"> <label for="a">JAVA Beginning</label>
<input type = "checkbox" id = "b" name = "checkGroup" value = "오라클"> <label for="b">Oracle </label><br>
<input type = "checkbox" id = "c" name = "checkGroup" value = "자바심화"> <label for="c">JAVA Advanced</label>
<input type = "checkbox" id = "d" name = "checkGroup" value = "웹클라이언트"> <label for="d">Web Client</label><br>
<input type = "checkbox" id = "e" name = "checkGroup" value = "웹APP서버"> <label for="e">JSP/Servlet</label>
<input type = "checkbox" id = "f" name = "checkGroup" value = "프레임워크"> <label for="f">Framework</label> <br>
<button type = "button" class = "btn" onclick = "actionChoice()">선택 완료</button>
</form>
</div>
</body>
</html>728x90