<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Spring 3 MVC</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">


	function goBackToHomePage() {
		window.location = "/SpringMultiCheckbox/helloWorld.web";
	}

	function selectAllCheckBox() {

		if (document.getElementById('select_all').checked == true) {
			$('.person_data').each(function() {
				this.checked = true;
			});
		} else {
			$('.person_data').each(function() {
				this.checked = false;
			});
		}

	}
</script>
</head>
<body>
<form:form id="multiCheckBox" commandName="person" method="post" action="multiCheckbox.web">
<h2>Multiple check box: ${message}</h2>

<table cellspacing="0" cellpadding="0" border="1" width="718">
              <tr>
                <Td><h2>${selected}</h2></Td>
              </tr>
              <tr>
                <td><div style="height:300px; overflow:auto;"><table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                      <td><input type="checkbox" name="Select All" id="select_all" onclick="selectAllCheckBox();"/></td>
                      <td><h3>Name</h3></td>
                      <td><h3>Department</h3></td>
                      <td><h3>Location</h3></td>
                      <td><h3>Zip</h3></td>
                      <td><h3>Salary</h3></td>
                    </tr>
                    
                    <c:forEach items="${person.personsList}" var="elements" varStatus="loop">                    
                    <tr>
                      <td ><form:checkbox path="selectedCheckBox" class="person_data" value="${loop.index}"/></td>
                      <td><c:out value='${elements.name}' /></td>
                      <td><c:out value='${elements.department}' /></td>
                      <td><c:out value='${elements.location}' /></td>
                      <td><c:out value='${elements.zip}' /></td>
                      <td id=salary<c:out value="${loop.index}"/>><fmt:formatNumber value="${elements.salary}" type="currency"/></td>
                    </tr>
                    </c:forEach>                    
                  </table></div></td>
              </tr>
            </table><br>
            <input type="submit" value="Submit Data">
            <input type="button" value="Go back to home page" onclick="goBackToHomePage();">
</form:form>
</body>
</html>