Checkbox toggling and checkall validation - clamshell navigation 1

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. Also, here is an image of how the page renders.

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;
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>

DUE TO SPACE ISSUES, CODE TRUNCATED TO JUST INCLUDE JAVASCRIPT CALLS

<form name="frmUsers">

<th width="200" align="center">Name<br/> </th>
<th width="50" class="centerCheck">View</th>
<th width="50" class="centerCheck">Notify</th>

<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>

<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>

<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>

<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>

</form>
</body>
</html>
regards,
Brian

jemminger · Feb 6, 2003

here's one way:
[tt]
function checkGroup(oTopLevel,oGroup) {
var bInitialState;
var bDifferent = false;
for (x = 0; x < oGroup.length; x++) {
if (x == 0)
bInitialState = oGroup[x].checked;
if (oGroup[x].checked != bInitialState)
bDifferent = true;
}
if (bDifferent) oTopLevel.checked = false;
else oTopLevel.checked = bInitialState;
}
[/tt]

call it like so:
[tt]
checkGroup(document.forms[0].ckViewAllInd,document.forms[0].ckViewInd);
[/tt]
=========================================================
if (!succeed) try();
-jeff

BG12424 · Feb 6, 2003

This worked great for what I was looking for. I like the fact that the code is much more dynamic than what i had. Thanks 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 1

BG12424

Programmer

jemminger

Programmer

BG12424

Programmer

Similar threads

Part and Inventory Search

Sponsor