Very wierd !

**spacemoc** · 07-31-2009 06:35 AM

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

**Charles** · 07-31-2009 07:47 AM

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.

**Kor** · 07-31-2009 08:05 AM

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>

**spacemoc** · 07-31-2009 08:50 AM

Thank you so much I own you one !!

Cheers

Thread: Very wierd !

Thread Tools

Display

Very wierd !

Thank You !!!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions