<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
int row = 10;
int col = 10;
int n = 0;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
.layout {
margin: 30px auto;
width: <%=col*30%>px;
}
.table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.table td {
text-align: center;
padding: 3px;
}
</style>
<script type="text/javascript">
function sendOk() {
var f = document.frm;
var cnt = 0;
var arr = [];
for(var i=0; i<f.chk.length; i++) {
if(f.chk[i].checked) { // 이름이 동일한 것이 여러 개 있으므로 배열로 처리
cnt++;
arr.push(f.chk[i].value);
}
}
if(cnt==0) {
alert("선택 항목이 없습니다.");
return;
}
alert('선택한 체크박스는 ' + arr.join() + ' 입니다.');
}
</script>
</head>
<body>
<div class="layout">
<form name="frm">
<table class="table">
<%for(int i=1; i<=row; i++) { %>
<tr>
<% for(int j=1; j<=col; j++) { %>
<td>
<input type="checkbox" name="chk" value="<%= (++n) %>">
</td>
<% } %>
</tr>
<% } %>
</table>
<table class="table">
<tr>
<td style="text-align: right;">
<button type="button" onclick="sendOk()">확인</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>