...

View Full Version : Checkbox revealing more info



many_tentacles
05-03-2006, 10:58 AM
Hi

I have a check box which when clicked, reveals another piece of information above it. This works fine, however I want it so that when any number of check boxes linked to that info are ticked, it is revealed. It is only hidden when no check boxes are ticked.

What I have here means that if an even number of check boxes are ticked it becomes hidden again.


<html>
<head>
<title>Untitled Document</title>

<script type="text/javascript">
function exp_coll(ind)

{
s = document.getElementById("sp_" + ind);
if (s.style.display == 'none')
{
s.style.display = 'block';
}
else if (s.style.display == 'block')
{
s.style.display = 'none';
}
}
</script>

</head>

<body>



<ul style="list-style-type:none; margin:0; padding:5px; width: 600px;">

<ul class="zzul" id="sp_0" style="display:none;">
Reveal Number 1<br><br>
</ul>

<ul class="zzul" id="sp_1" style="display:none;">
Reveal Number 2<br><br>
</ul>

<li><input name="number1" onchange="javascript:exp_coll(0);" type="checkbox" value="reveal number 1"> Reveal 1a
</li>


<li><input name="number3" onchange="javascript:exp_coll(1);" type="checkbox" value="reveal number 3"> Reveal 2a
</li>
<li><input name="number3" onchange="javascript:exp_coll(1);" type="checkbox" value="reveal number 3"> Reveal 2b
</li>

</ul>


</body>
</html>


Any ideas how i can change the javascript to make it work.???

thanks

Kor
05-03-2006, 11:46 AM
I don't quite understand what and when to appaer/dissapear. But till than, allow me to give you an advice. Using display will make the checboxes jump up and down on click, so that it might happend that the checkbox, even clicked, to remain unchecked. Use rather visibility and leave a blank space above the checkboxes.

many_tentacles
05-03-2006, 12:04 PM
Sorry, i'll simplify the code a little...


<html>
<head>
<title>Untitled Document</title>

<script type="text/javascript">
function exp_coll(ind)

{
s = document.getElementById("sp_" + ind);
if (s.style.display == 'none')
{
s.style.display = 'block';
}
else if (s.style.display == 'block')
{
s.style.display = 'none';
}
}
</script>

</head>

<body>



<ul style="list-style-type:none; margin:0; padding:5px; width: 600px;">

<ul class="zzul" id="sp_0" style="display:none;">
Reveal Number 1<br><br>
</ul>



<li><input name="number1" onchange="javascript:exp_coll(0);" type="checkbox" value="reveal number 1"> Reveal 1a
</li>
<li><input name="number3" onchange="javascript:exp_coll(0);" type="checkbox" value="reveal number 3"> Reveal 1b
</li>
<li><input name="number3" onchange="javascript:exp_coll(0);" type="checkbox" value="reveal number 3"> Reveal 1c
</li>

</ul>


</body>
</html>

Basically, i want the info above teh checkboxes to be revealed when "any" of the checkboxes are ticked. Currently it switches it off if an even number of checkboxes are ticked.

This make more sense??? I know i'm a bit vague but that cos i don't know what i'm talking about really!

Kor
05-03-2006, 12:35 PM
Ok, I have also simplified this example. Is this what you want?:


<!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(){
var b=false;
for(var i=0;i<c.length;i++){if(c[i].checked){b=c[i].checked;break}}
document.getElementById('mydiv').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="mydiv" style="visibility:hidden">Reveal something</div>
<input type="checkbox" name="number1" onclick="rev()"><br>
<input type="checkbox" name="number2" onclick="rev()"><br>
<input type="checkbox" name="number3" onclick="rev()">
</body>
</html>

many_tentacles
05-03-2006, 12:49 PM
Yeah, that does what i want it to do! thanks...

One problem though...

I need more than one set of checkboxes, so each set brings up a different message.


<!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(){
var b=false;
for(var i=0;i<c.length;i++){if(c[i].checked){b=c[i].checked;break}}
document.getElementById('mydiv').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="mydiv" style="visibility:hidden">Reveal something</div>
<input type="checkbox" name="number1" onclick="rev()"><br>
<input type="checkbox" name="number2" onclick="rev()"><br>
<input type="checkbox" name="number3" onclick="rev()">

<div id="mydiv" style="visibility:hidden">Reveal something else</div>
<input type="checkbox" name="number1" onclick="rev()"><br>
<input type="checkbox" name="number2" onclick="rev()"><br>
<input type="checkbox" name="number3" onclick="rev()">
</body>
</html>

Is this an easy thing to fix??

Kor
05-03-2006, 01:03 PM
Ok, let's think dynamic, then:


<!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">
function rev(p){
var c=p.getElementsByTagName('input');
var d=p.getElementsByTagName('div')[0];
var b=false;
for(var i=0;i<c.length;i++){if(c[i].checked){b=c[i].checked;break}}
d.style.visibility=b?'visible':'hidden';
}
</script>
</head>
<body>
<div>
<div style="visibility:hidden">Reveal something</div>
<input type="checkbox" onclick="rev(this.parentNode)"><br>
<input type="checkbox" onclick="rev(this.parentNode)"><br>
<input type="checkbox" onclick="rev(this.parentNode)">
</div>
<div>
<div style="visibility:hidden">Reveal something else</div>
<input type="checkbox" onclick="rev(this.parentNode)"><br>
<input type="checkbox" onclick="rev(this.parentNode)"><br>
<input type="checkbox" onclick="rev(this.parentNode)">
</div>
</body>
</html>

many_tentacles
05-03-2006, 01:39 PM
Ok, that last bit went way way over my head...

I've adapted the code from before and "almost" got it to work...

It's just not quite there... have a play with the buttons and you will 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(p){
var b=false;
for(var i=0;i<c.length;i++){if(c[i].checked){b=c[i].checked;break}}
document.getElementById("mydiv" + p).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>
<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="number1" onclick="rev(1)">a) group2<br>
<input type="checkbox" name="number2" onclick="rev(1)">b) group2<br>
<input type="checkbox" name="number3" onclick="rev(1)">c) group2<br><br>

<input type="checkbox" name="number1" onclick="rev(2)">a) group3<br>
<input type="checkbox" name="number2" onclick="rev(2)">b) group3<br>
<input type="checkbox" checked disabled name="number3" onclick="rev(2)">c) group3<br><br>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum