Results 1 to 2 of 2

Thread: Javascript problem... probably simple!

  1. #1
    Join Date
    Dec 2005
    Posts
    21

    Javascript problem... probably simple!

    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.

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

  2. #2
    Join Date
    May 2006
    Location
    Vancouver, BC
    Posts
    13
    The logic of the script goes very different from your requirement. I've rewritten it. See if this is good for you:


    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">
    
    // 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
    Last edited by gumlor; 08 May 2006 at 06:27 PM.

Similar Threads

  1. Problem with javascript Slideshow and transparent PNG files
    By moez in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 0
    Last Post: 20 Jan 2006, 02:56 PM
  2. Simple Problem... PLEASE HELP!
    By irishdunn in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 06 Oct 2005, 10:54 PM
  3. Simple Javascript Scrolling buttons
    By joshelley in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 0
    Last Post: 23 Sep 2005, 08:21 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
  •