Checkbox toggling and checkall validation - clamshell navigation

BG12424 · Feb 6, 2003

I need help with my ValidateCheckAll function. When I click on an individual checkbox, I want to check all other checkboxes in that group to determine if I need to check the top-level checkbox for the designated group.

Also, after reviewing my code for this functionality, if there is an easier (less static) way to go about this, please advise.

Below is my code for this functionality. A picture of how this page renders can be found at the following link.

http://home.attbi.com/~gainesme72/usermgmt.gif

Thanks a ton

<html>
<head>
<title>User Management</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2" type="text/javascript">
<!--
var isDHTML = 0;
var isID = 0;
var isAll = 0;
var isLayers = 0;

//Uses feature sensing to determine browser capabilities
if (document.getElementById) {isID = 1; isDHTML = 1;}
else {
if (document.all) {isAll = 1; isDHTML = 1;}
else {
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}
}}

//Finds the location of thd DOM and the ability to access the style properties
function findDOM(objectID,withStyle) {
if (withStyle == 1) {
if (isID) { return (document.getElementById(objectID).style) ; }
else {
if (isAll) { return (document.all[objectID].style); }
else {
if (isLayers) { return (document.layers[objectID]); }
};}
}
else {
if (isID) { return (document.getElementById(objectID)) ; }
else {
if (isAll) { return (document.all[objectID]); }
else {
if (isLayers) { return (document.layers[objectID]); }
};}
}
}

//Hides/Shows the side navigation window
function toggleUserMenu(objectID) {
if (isAll || isID) {
domStyle = findDOM(objectID,1);
if (domStyle.display =='block') domStyle.display='none';
else domStyle.display='block';
}
return;
}

//Selects/De-selects all checkboxes for appropriate group if top-level checkbox is clicked
function ToggleAll(e,which) {
if (e.checked) {
CheckAll(which);
} else {
ClearAll(which);
}
}

//Selects/De-selects the clicked checkbox, but also validates all other checkboxes to
//determine if top-level checkbox should be selected.
function ToggleThis(e,which) {
switch (which) {
case "ckViewAllInd": case "ckViewAllRoles":
if (e.checked) {
ValidateCheckAll("ckViewAllInd&quot

;
ValidateCheckAll("ckViewAllRoles&quot

;
} else {
Clear(e,which);
}
break;
case "ckNotifyAllInd": case "ckNotifyAllRoles":
if (e.checked) {
ValidateCheckAll("ckNotifyAllInd&quot

;
ValidateCheckAll("ckNotifyAllRoles&quot

;
} else {
Clear(e,which);
}
break;
}
}

//Selects the current checkbox
function Check(e) {
e.checked = true;
}

//De-selects the current checkbox
function Clear(e,which) {
e.checked = false;
if (which != '') {
eval("frmUsers." + which + ".checked = false;&quot

;
}
}

//Displays debuggin information
function alertCheck(e,which,pass) {
var n = "\n";
var msg = "PASS # " + pass;
msg += n + "---------------------------------------";
msg += n + "which=" + which;
msg += n + "e.value=" + e.value;
msg += n + "e.checked=" + e.checked;
return alert(msg);
}

//global variables to show me if all checkboxes for a given group are selected ( problematic possibly )
var allViewIndChecked=true;
var allViewRoleChecked=true;
var allNotifyIndChecked=true;
var allNotifyRoleChecked=true;

//Checks whether to select the top-level checkbox ( problematic area )
function ValidateCheckAll(which) {

var frm = document.frmUsers;
var len = frm.elements.length;
var ipass=0;
for (var i = 0; i < len; i++) {
ipass += 1;
var e = frm.elements;
// alertCheck(e,which,ipass);
if (!e.checked) {
switch (e.name) {
case "ckViewInd":
allViewIndChecked=false;
break;
case "ckViewRole":
allViewRoleChecked=false;
break;
case "ckNotifyInd":
allNotifyIndChecked=false;
break;
case "ckNotifyRole":
allNotifyRoleChecked=false;
break;
}
}
}

if (allViewIndChecked) {
CheckAll("ckViewAllInd"
} else if (allViewRoleChecked) {
CheckAll("ckViewAllRoles"
} else if (allNotifyIndChecked) {
CheckAll("ckNotifyAllInd"
} else if (allNotifyRoleChecked) {
CheckAll("ckNotifyAllRoles"
} else {
eval("frm." + which + ".checked = true;"
return true;
}
}

//Selects all the checkboxes in a given group
function CheckAll(which) {
var frm = document.frmUsers;
var len = frm.elements.length;
for (var i = 0; i < len; i++) {
var e = frm.elements;
switch (which) {
case "ckViewAllInd":
if (e.name == "ckViewInd&quot {
Check(e);
}
break;
case "ckViewAllRoles":
if (e.name == "ckViewRole&quot {
Check(e);
}
break;
case "ckNotifyAllInd":
if (e.name == "ckNotifyInd&quot {
Check(e);
}
break;
case "ckNotifyAllRoles":
if (e.name == "ckNotifyRole&quot {
Check(e);
}
break;
}
}

eval("frm." + which + ".checked = true;"

if (which == "ckNotifyAllInd&quot {
allNotifyIndChecked=true;
} else if (which == "ckNotifyAllRoles&quot {
allNotifyRoleChecked=true;
} else if (which == "ckViewAllInd&quot {
allViewIndChecked=true;
} else if (which == "ckViewAllRoles&quot {
allViewRoleChecked=true;
}
}

//De-selects all the checkboxes in a given group
function ClearAll(which) {
var frm = document.frmUsers;
var len = frm.elements.length;
for (var i = 0; i < len; i++) {
var e = frm.elements;
switch (which) {
case "ckViewAllInd":
if (e.name == "ckViewInd&quot {
Clear(e,'');
viewIndFlag=false;
}
break;
case "ckViewAllRoles":
if (e.name == "ckViewRole&quot {
Clear(e,'');
viewRoleFlag=false;
}
break;
case "ckNotifyAllInd":
if (e.name == "ckNotifyInd&quot {
Clear(e,'');
NotifyIndFlag=false;
}
break;
case "ckNotifyAllRoles":
if (e.name == "ckNotifyRole&quot {
Clear(e,'');
NotifyRoleFlag=false;
}
break;
}
}

eval("frm." + which + ".checked = false;"

if (which == "ckNotifyAllInd&quot {
allNotifyIndChecked=false;
} else if (which == "ckNotifyAllRoles&quot {
allNotifyRoleChecked=false;
} else if (which == "ckViewAllInd&quot {
allViewIndChecked=false;
} else if (which == "ckViewAllRoles&quot {
allViewRoleChecked=false;
}
}

// -->

</script>
</head>

<body>
<form name="frmUsers">
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr bgcolor="#CCCCCC">
<th width="200" align="center">Name<br/> </th>
<th width="50" class="centerCheck">View</th>
<th width="50" class="centerCheck">Notify</th>
</tr>
<%
dim i
i = 1
%>
<tr bgcolor="#FF8800">
<td width="200">
<a class="menuHead" href="javascript:toggleUserMenu('menu<%response.write(i)%>')">
<img src="../static/images/global/plat_bullet.gif" border="0" alt="Expand Individuals"> Individuals
</a>
</td>
<td width="50" class="centerCheck"><input id="ckViewAllInd" name="ckViewAllInd" type="checkbox" value="viewIndAll" onClick="ToggleAll(this,'ckViewAllInd');"></td>
<td width="50" class="centerCheck"><input id="ckNotifyAllInd" name="ckNotifyAllInd" type="checkbox" value="notifyIndAll" onClick="ToggleAll(this,'ckNotifyAllInd')"></td>
</tr>
<tr>
<td width="100%" colspan="3">
<span id="menu<%response.write(i)%>">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<%
do while not rs.eof
%>
<tr bgcolor="#FFFFFF">
<td width="188" class="nameIndent"><%response.write(rs("FirstName&quot & " " & rs("LastName&quot)%></td>
<td width="56" align="center"><input id="ckViewInd" name="ckViewInd" type="checkbox" value="<% response.write(rs("UserId&quot)%>" onClick="ToggleThis(this,'ckViewAllInd');"></td>
<td width="56" align="center"><input id="ckNotifyInd" name="ckNotifyInd" type="checkbox" value="<% response.write(rs("UserId&quot)%>" onClick="ToggleThis(this,'ckNotifyAllInd');"></td>
</tr>
<%
rs.movenext
loop
i=i+1
%>
</table>
</span>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<%
rs.movefirst
%>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#FF8800">
<td width="200">
<a class="menuHead" href="javascript:toggleUserMenu('menu<%response.write(i)%>')">
<img src="../static/images/global/plat_bullet.gif" border="0" alt="Expand Roles"> Roles
</a>
</td>
<td width="50" class="centerCheck"><input id="ckViewAllRoles" name="ckViewAllRoles" type="checkbox" value="viewRoleAll" onClick="ToggleAll(this,'ckViewAllRoles');"></td>
<td width="50" class="centerCheck"><input id="ckNotifyAllRoles" name="ckNotifyAllRoles" type="checkbox" value="notifyRoleAll" onClick="ToggleAll(this,'ckNotifyAllRoles');"></td>
</tr>
<tr>
<td width="100%" colspan="3">
<span id="menu<%response.write(i)%>">
<table bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<%
dim prev,curr,role,rolecount,color
prev = "" : curr = "" : rolecount = 0: diffcount = 0
do while not rs.eof
if rolecount mod 2 = 0 then
prev = rs("RoleName&quot 'Even row number
color="#FFFFFF"
else
curr = rs("RoleName&quot 'Odd row number
color="#FFFFFF"
end if
rolecount = rolecount + 1
if prev <> curr then
i=i+1
if rolecount = 1 then
role=prev
else
response.Write("</table></span></td></tr>&quot
role=curr
end if
%>
<tr bgcolor="#CCCCCC">
<td width="178" class="SubMenuIndent">
<a class="menuHead" href="javascript:toggleUserMenu('menu<%response.write(i)%>')">
<img src="../static/images/global/plat_bullet.gif" border="0" alt="Expand <% response.write(role) %>"> <% response.write(role) %>
</a>
</td>
<td width="50" class="centerCheck"><input id="ckViewRole" name="ckViewRole" type="checkbox" value="<% response.write(rs("RoleId&quot)%>" onClick="ToggleThis(this,'ckViewAllRoles');"></td>
<td width="50" class="centerCheck"><input id="ckNotifyRole" name="ckNotifyRole" type="checkbox" value="<% response.write(rs("RoleId&quot)%>" onClick="ToggleThis(this,'ckNotifyAllRoles');"></td>
</tr>
<tr><td colspan="3">
<span id="menu<%response.write(i)%>">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<%
end if
%>
<tr bgcolor="#FFFFFF">
<td width="300" colspan="3">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="<%=color%>">
<td colspan="3" width="100%" class="SubMenuNameIndent"><%response.write(rs("FirstName&quot & " " & rs("LastName&quot)%></td>
</tr>
</table>
</td>
</tr>
<%
rs.movenext
loop
%>
</span>
</table>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
regards,
Brian

Targol · Feb 6, 2003

Brian, a few remarks :
- First, you don't need 3 threads in the same forum for the same question.
- Second : can you be as courageous as we are lazy and post only the part of the code pointed by your question ? Water is not bad as long as it stays out human body ;-)

BG12424 · Feb 6, 2003

PLEASE DISREGARD THIS MESSAGE POST (POST TO THE LATEST POSTING WITH THE SAME SUBJECT HEADER.)

I RECEIVED SERVER ERRORS FROM TEK-TIPS, SO I DID NOT THINK IT POSTED THE FIRST OR SECOND TIME.

SORRY!!! regards,
Brian

BG12424 · Feb 6, 2003

Goto thread216-468484 instead regards,
Brian

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Checkbox toggling and checkall validation - clamshell navigation

BG12424

Programmer

Targol

Technical User

BG12424

Programmer

BG12424

Programmer

Similar threads

Part and Inventory Search

Sponsor