PDA

View Full Version : Javascript problem... probably simple!


many_tentacles
03 May 2006, 09:33 AM
I have a set of checkboxes which when at least one is clicked, a piece of information above it is revealed. This works fine, however i want to work with 3 sets of checkboxes revealing 3 seperate pieces of hidden information.

Here's the code i have at the moment. If you click a box from each set, they won't both turn off as they should... have a play and you'll see what i mean.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var c=[]
function rev(ind){
var b=false;
for(var i=0;i<c.length;i++){if(c[i].checked){b=c[i].checked;break}}
document.getElementById('mydiv' + ind).style.visibility=b?'visible':'hidden';
}
onload = function(){
var n = document.getElementsByTagName('input');
for(var i=0;i<n.length;i++){n[i].name.match(/number/)?c[c.length]=n[i]:null;}
}
</script>

</head>
<body>
<div id="mydiv0" style="visibility:hidden">Revealed from group 1</div>
<div id="mydiv1" style="visibility:hidden">Revealed from group 2</div>
<div id="mydiv2" style="visibility:visible">Revealed from group 3</div><br>
<input type="checkbox" name="number1" onclick="rev(0)">a) group1<br>
<input type="checkbox" name="number2" onclick="rev(0)">b) group1<br>
<input type="checkbox" name="number3" onclick="rev(0)">c) group1<br><br>

<input type="checkbox" name="number4" onclick="rev(1)">a) group2<br>
<input type="checkbox" name="number5" onclick="rev(1)">b) group2<br>
<input type="checkbox" name="number6" onclick="rev(1)">c) group2<br><br>

<input type="checkbox" name="number7" onclick="rev(2)">a) group3<br>
<input type="checkbox" name="number8" onclick="rev(2)">b) group3<br>
<input type="checkbox" name="number9" onclick="rev(2)">c) group3<br><br>

</body>
</html>

Any ideas where it's gone wrong???
gumlor
08 May 2006, 05:58 PM
The logic of the script goes very different from your requirement. I've rewritten it. See if this is good for you:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">

// short-hands
getElem = document.getElementById;
showElem = function(e) { getElem(e).style.visibility='visible'; }
hideElem = function(e) { getElem(e).style.visibility='hidden'; }

// check if any box in a group is checked. return boolean
function isGroupChk(ind) {
var chkArray = getElem('chkgrp'+ind).getElementsByTagName('input');
for (var ii=0;ii<chkArray.length;ii++) {
if (chkArray[ii].checked) return true;
}
return false;
}

// show/hide the divs by the checkbox status
function rev(ind) {
if (isGroupChk(ind)) {
showElem('mydiv'+ind);
} else {
hideElem('mydiv'+ind);
}
}

</script>


</head>
<body>
<div id="mydiv0" style="visibility:hidden">Revealed from group 1</div>
<div id="mydiv1" style="visibility:hidden">Revealed from group 2</div>
<div id="mydiv2" style="visibility:visible">Revealed from group 3</div><br>

<div id="chkgrp0">
<input type="checkbox" name="number1" onclick="rev(0)">a) group1<br>
<input type="checkbox" name="number2" onclick="rev(0)">b) group1<br>
<input type="checkbox" name="number3" onclick="rev(0)">c) group1<br><br>
</div>

<div id="chkgrp1">
<input type="checkbox" name="number4" onclick="rev(1)">a) group2<br>
<input type="checkbox" name="number5" onclick="rev(1)">b) group2<br>
<input type="checkbox" name="number6" onclick="rev(1)">c) group2<br><br>
</div>

<div id="chkgrp2">
<input type="checkbox" name="number7" onclick="rev(2)">a) group3<br>
<input type="checkbox" name="number8" onclick="rev(2)">b) group3<br>
<input type="checkbox" name="number9" onclick="rev(2)">c) group3<br><br>
</div>

</body>
</html>


------
Visit my startup - Tooldle.com $0 Web Plugin Tools for Web Designer (http://www.tooldle.com)