Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Checkbox revealing more info

    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.

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

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Sorry, i'll simplify the code a little...

    Code:
    <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!

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Ok, I have also simplified this example. Is this what you want?:
    Code:
    <!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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    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.

    Code:
    <!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??

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Ok, let's think dynamic, then:
    PHP Code:
    <!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> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    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.

    Code:
    <!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>
    Last edited by many_tentacles; 05-03-2006 at 03:35 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •