www.webdeveloper.com
Results 1 to 4 of 4

Thread: Very wierd !

  1. #1
    Join Date
    Jul 2009
    Posts
    138

    Smile Very wierd !

    Hi,

    I am trying to display text using checboxes and is working very well

    this is the function
    Code:
    function showMe (it, box) { 
    		  var vis = (box.checked) ? "block" : "none"; 
    		  document.getElementById(it).style.display = vis;
    		}
    and that's the checkboxes
    Code:
    <input type="checkbox" name="first" value="1" onclick="showMe('div1', this)">
    <input type="checkbox" name="second" value="1" onclick="showMe('div2', this)">
    and the text to show
    Code:
    <div class="row" id="div1" style="display:none">first</div><div class="row" id="div2" style="display:none">second</div>
    And this thing works really good, but how to make it when I will check those 2 checkboxes together to appear a THIRD text.

    For example:

    if first checkbox = second checkbox
    show: <div class="row" id="div1" style="display:none">THIRD</div>


    I tryed to look for the solution everywhere but no result, please help

    Cheers
    Last edited by Kor; 07-31-2009 at 07:42 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>Example</title>
    		<script type="text/javascript">
    		<!--
    		if (document.getElementById) onload = function () {
    			var list = document.getElementById ('list').getElementsByTagName ('li');
    			for (var i = 0; i < list.length; i++) list[i].className = 'hidden';
    			
    			var body = document.getElementsByTagName ('body')[0];
    			var ul = document.createElement ('ul');
    			body.appendChild (ul);
    			
    			var li, input, s;
    			i = 0;
    			while (s = ['foo', 'bar'][i++]) {
    				li = document.createElement ('li');
    				ul.appendChild (li);
    				input = document.createElement ('input');
    				input.setAttribute ('type', 'checkbox');
    				li.appendChild (input);
    				li.appendChild (document.createTextNode(s));
    				
    				input.onclick = function () {
    					var list = document.getElementById ('list').getElementsByTagName ('li');
    					var these = this.parentNode.parentNode.getElementsByTagName ('input');
    					if (these[0].checked && these[1].checked) {
    						list[0].className = list[1].className = 'hidden';
    						list[2].className = '';
    					} else {
    						list[2].className = 'hidden';
    						for (var i = 0; i < list.length; i++) list[i].className = these[i].checked ? '' : 'hidden';
    					}
    				}			
    			}
    		}
    		// -->	
    		</script>
    		<style type="text/css">
    			.hidden {display:none}
    		</style>
    	</head>
    	<body>
    		<ul id="list">
    			<li>One</li>
    			<li>Two</li>
    			<li>Three</li>
    		</ul>
    	</body>
    </html>
    JavaScript being iffy you want to hide things with JavaScript from the get go and you want to use JavaScript to create any element that only has meaning when JavaScript works.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    The easiest way is to first hide all the DIV's and show only the desired. For this you need to group the elements somehow, to be able to circle through them. A basic example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>untitled</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 showMe(id,obj){
    var check=document.getElementsByName(obj.name), c, i=0, q=0, d;
    while(c=check[i++]){
    c.checked?q+=Number(c.value):null;
    }
    i=1;
    while(d=document.getElementById('div'+(i++))){
    d.style.display=q==(i-1)?'block':'none';
    }
    }
    </script>
    </head>
    <body>
    <form action="">
    <input type="checkbox" name="chk" value="1" onclick="showMe('div1',this)">
    <input type="checkbox" name="chk" value="2" onclick="showMe('div2',this)">
    </form>
    <br>
    <div id="div1" style="display:none">one</div>
    <div id="div2" style="display:none">two</div>
    <div id="div3" style="display:none">three</div>
    </body>
    </html>
    Last edited by Kor; 07-31-2009 at 10:09 AM.

  4. #4
    Join Date
    Jul 2009
    Posts
    138

    Thumbs up Thank You !!!

    Thank you so much I own you one !!

    Cheers

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles