I am using an ajax to load form fields. When the you select the school, the grade fields load. When you select the grade, the show name check box appears. When the select all box appears, I have to click the select all box twice for it to work. I am not really sure what the issue is.
I also posted the code to paste bin.
Click Here
showGrade
showname
showcourse
<html>
<head>
<title>Scoring</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<meta content="no-cache" http-equiv="Pragma">
<meta content="no-cache, must-revalidate" http-equiv="Cache-Control">
<style type="text/css">
A.nav {
text-decoration: none;
color: black;
font-weight:bold;
}
</style>
</head>
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">
<script type="text/javascript">
function CustomajaxFunction(ajaxAction,getPage,doReturn,returnID)
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if ( document.getElementById(returnID) )
{
document.getElementById(returnID).innerHTML=xmlHttp.responseText;
return false;
}
}
}
xmlHttp.open(ajaxAction,getPage,true);
xmlHttp.send(null);
}
</script>
<script language="javascript">
function FirstCheck()
{
var g=document.report.school.value;
if (g.length)
{
document.getElementById('shwschool3').style.display='';
document.getElementById('shwschoollbl3').style.display='';
CustomajaxFunction('get','showgrade.html?gradec='+g,1,'shwschool3');
document.getElementById('shwteacherlbl3').style.display='none';
document.getElementById('shwteacher3').style.display='none'
}
else
{
document.getElementById('shwschool3').style.display='none';
document.getElementById('shwschoollbl3').style.display='none';
document.getElementById('shwteacher3').style.display='none';
document.getElementById('shwteacherlbl3').style.display='none';
document.getElementById('shwcourselbl3').style.display='none';
document.getElementById('shwcourse3').style.display='none';
}
}
function SecondCheck()
{
var g=document.report.DistrictGrade.value;
var b=document.report.school.value;
if (g.length)
{
document.getElementById('shwteacher3').style.display='';
document.getElementById('shwteacherlbl3').style.display='';
CustomajaxFunction('get','showname.html?tgrade='+g+'&sch='+b,1,'shwteacher3');
}
else
{
document.getElementById('shwteacher3').style.display='none';
document.getElementById('shwteacherlbl3').style.display='none';
document.getElementById('shwcourselbl3').style.display='none';
document.getElementById('shwcourse3').style.display='none';
}
}
function ThirdCheck()
{
var g=document.report.DistrictGrade.value;
var b=document.report.school.value;
var cou = '';
if ($('input[name=coursereportcheckall][type=checkbox]') && $('input[name=coursereportcheckall]:checked').length >= 1)
{
//alert('');
}
$(document).on('click', '.#checkall', function(event)
{
var checked_status = this.checked;
var cou='';
if (this.type == 'checkbox')
{
$('.tid').attr('checked', $(this).is(':checked'));
$.each($("input[name='tid']:checked"), function(){cou += (cou?',':'') + $(this).attr('value');});
}
if (cou.length)
{
document.getElementById('shwcourse3').style.display='';
document.getElementById('shwcourselbl3').style.display='';
CustomajaxFunction('get','showcourse.html?tgrade='+g+'&cou='+cou+'&sch='+b,1,'shwcourse3');
}
else
{
document.getElementById('shwcourse3').style.display='none';
document.getElementById('shwcourselbl3').style.display='none';
}
});
}
function FourthCheck()
{
var g=document.report.DistrictGrade.value;
var b=document.report.school.value;
var cou = '';
$.each($("input[name='tid']:checked"), function(){cou += (cou?',':'') + $(this).attr('value');});
if (cou.length)
{
document.getElementById('shwcourse3').style.display='';
document.getElementById('shwcourselbl3').style.display='';
CustomajaxFunction('get','showcourse.html?tgrade='+g+'&cou='+cou+'&sch='+b,1,'shwcourse3');
}
else
{
document.getElementById('shwcourse3').style.display='none';
document.getElementById('shwcourselbl3').style.display='none';
}
}
</script>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript">
$(document).on('click', '.#checkallcourse', function(event)
{
var checked_status = this.checked;
if (this.type == 'checkbox'){$('.cid').attr('checked', $(this).is(':checked')); }
});
</script>
<div align="left">
<table width="500" cellspacing="0" cellpadding="0" border="0" style="background-color:buttonFace; border:1px solid black;">
<tr>
<td valign="top" style="padding-left:10px; padding-right:10px;">
<form method="post" action="index.html" id="report" name="report">
<table cellpadding="5">
<tr><td valign="top" align="left">School:</td>
<td valign="top" align="left">
<select onChange="FirstCheck(this.selectedIndex);" id="school" name="school">
<option value="">Select a School</option>
<option value="1">Washington Elementary</option>
<option value="2">Adams Elementary</option>
<option value="3">Jefferson High</option>
<option value="4">Madison Elementary</option>
<option value="5">Monroe West High</option>
<option value="6">Jackson Elementary</option>
</select>
</td>
</tr>
<tr><td align="left" style="display:none;" id="shwschoollbl3">Grade:</td>
<td valign="top" nowrap="" style="display:none;" id="shwschool3"></td>
</tr>
<tr><td valign="top" align="left" style="display:none;" id="shwteacherlbl3">Show Name:</td>
<td valign="top" nowrap="" style="display:none;" id="shwteacher3"></td>
</tr>
<tr><td valign="top" align="left" style="display:none;" id="shwcourselbl3">Course:</td>
<td valign="top" align="left" style="display:none;" id="shwcourse3"></td>
</tr>
<tr><td align="center" colspan="3"><input type="Button" value="Create Report"></td></tr>
</table>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
showcourse.html
<input type="checkbox" id="checkallcourse">Select All<br />
<input type="checkbox" name="cid" id="cid" class="cid" value="12"/> Twelve<br />
<input type="checkbox" name="cid" id="cid" class="cid" value="13"/> Thirteen<br />
<input type="checkbox" name="cid" id="cid" class="cid" value="14"/> Fourteen<br />
showname.html
<input type="checkbox" class="coursereportcheckall" onChange="ThirdCheck();" id="checkall" name="coursereportcheckall">Select All<br>
<input type="checkbox" onChange="FourthCheck(this.selectedIndex);" value="10" class="tid" id="tid" name="tid"> George Washington<br>
<input type="checkbox" onChange="FourthCheck(this.selectedIndex);" value="11" class="tid" id="tid" name="tid"> John Adams<br>
showgrade.html
<select onChange="SecondCheck(this.selectedIndex);" id="DistrictGrade" name="DistrictGrade">
<option value="">Select a Grade</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>