<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Struts2 multiple checkbox example</title>
<script type="text/javascript"
	src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		
		$("#select_all").change(function(){
           if(this.checked){
           $(":checkbox").each(function(){
               this.checked=true;
           });             
       }else{
           $(":checkbox").each(function(){
               this.checked=false;
           });              
       }
   });

	$(":checkbox").click(function () {
        if (!$(this).is(":checked")){
            $("#select_all").prop("checked", false);
        }else{
            var flag = 0;
            $(":checkbox").each(function(){
                if(!this.checked)
                flag=1;
            });              
            if(flag == 0){ 
            	$("#select_all").prop("checked", true);
            }
        }
    	});	
	
	    //Validate if all checkbox is checked	
		var allChecked = $(':checkbox:checked').length == $(':checkbox').length - 1;
		if (allChecked) {
			$("#select_all").prop("checked", true);
		} else {
			$("#select_all").prop("checked", false);
		}
	});
</script>
<s:head />
</head>

<body>
	<h2 style="color: green">
		<s:text name="label.welcome" />
	</h2>
	<s:form action="struts2SampleCodeAction" namespace="/" method="post"
		name="strutsForm">
		<table cellspacing="0" cellpadding="0" border="1" width="500">
			<tr style="font-weight: bold">
				<td><s:checkbox name="Select All" id="select_all"
						theme="simple" /></td>
				<td><s:text name="label.firstName" /></td>
				<td><s:text name="label.lastName" /></td>
				<td><s:text name="label.location" /></td>
			</tr>
			<s:iterator value="personList" status="stat">
				<tr>
					<td><s:checkbox name="checkboxes[%{#stat.index}]"
							theme="simple" /></td>
					<td><s:property value="firstName" /> <s:hidden
							value="%{personList.firstName}" /></td>
					<td><s:property value="lastName" /></td>
					<td><s:property value="location" /></td>
				</tr>
			</s:iterator>
		</table>
		</br>
		<s:submit align="left" />
	</s:form>
</body>
</html>
