Show/Hide Div with checkbox options providing same results

**shakerdesigns** · 12-05-2007, 09:34 PM

I'm completely versed in the show/hide options available, but have a problem I haven't been able to figure out. I have 5 checkbox input options, the first two options providing the same show div. For example,

Code:

<html>

<head>
<script type="text/javascript"> 
	<!-- 
	function showMe (it, box) { 
	  var vis = (box.checked) ? "block" : "none"; 
	  document.getElementById(it).style.display = vis;
	} 
	//--> 
</script>
</head>

<body>

<form>
<input type="checkbox" name="modtype"  value="value1" onclick="showMe('div1', this)" />value1

<input type="checkbox" name="modtype"  value="value2" onclick="showMe('div1', this)" />value2

<input type="checkbox" name="modtype"  value="value3" onclick="showMe('div2', this)" />value3

<input type="checkbox" name="modtype"  value="value4" onclick="showMe('div3', this)" />value4

<input type="checkbox" name="modtype"  value="value5" onclick="showMe('div4', this)" />value5

<div class="row" id="div1" style="display:none">Show Div 1</div>
<div class="row" id="div2" style="display:none">Show Div 2</div>
<div class="row" id="div3" style="display:none">Show Div 3</div>
<div class="row" id="div4" style="display:none">Show Div 4</div>
</form>

</body>

</html>

As you can see, the first two options should show the same div. Selecting one or both isn't a problem, the div appears as should, but when deselecting one of the checkboxes, the div disappears even though one of the checkboxes is still selected.

Does anyone have an idea as to how I can get the div to remain selected when one of the two checkboxes is deselected? Or, if either of the checkboxes are selected, to provide just one result?

Thanks!

**chr15** · 12-20-2007, 11:29 PM

<html>

<head>
<script type="text/javascript">

</script>
</head>

<body>

<form>
<input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1

<input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2

<input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3

<input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4

<input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5

<div class="row" id="div1" style="display:none">Show Div 1</div>
<div class="row" id="div2" style="display:none">Show Div 2</div>
<div class="row" id="div3" style="display:none">Show Div 3</div>
<div class="row" id="div4" style="display:none">Show Div 4</div>
<div class="row" id="div5" style="display:none">Show Div 5</div>
</form>

</body>

</html>

**golmiami** · 05-30-2008, 01:50 AM

I'm trying to modify this code. I'm a newbie with java scripts.

please be patient This what I need I added a submit button to trigger the show/hide of only the check boxes I selected. The initial state of all boxes should be unselected, once I check the boxes I want and click on the button only those divs should show up.

This is what i got so far any help will be very appreciate

<html>

<head>
<script type="text/javascript">

</script>
</head>

<body>

<form>
<input type="checkbox" name="modtype" value="value1" onBlur="showMe('div1', this)" />value1

<input type="checkbox" name="modtype" value="value2" onBlur="showMe('div2', this)" />value2

<input type="checkbox" name="modtype" value="value3" onBlur="showMe('div3', this)" />value3

<input type="checkbox" name="modtype" value="value4" onBlur="showMe('div4', this)" />value4

<input type="checkbox" name="modtype" value="value5" onBlur="showMe('div5', this)" />value5

<div class="row" id="div1" style="display:none">Show Div 1</div>
<div class="row" id="div2" style="display:none">Show Div 2</div>
<div class="row" id="div3" style="display:none">Show Div 3</div>
<div class="row" id="div4" style="display:none">Show Div 4</div>
<div class="row" id="div5" style="display:none">Show Div 5</div>
<br>
<br>
<label>
<input type="submit" name="onclick" id="onclick" onClick="function showMe (it, box)" value="Submit">
</label>
<br>
</form>

</body>

</html>

**golmiami** · 05-30-2008, 01:58 AM

forgot to mention all raws must show up at initial state and check boxes unckecked. Sorry for the confusion..

**rangana** · 05-30-2008, 02:19 AM

See if this helps:

HTML Code:

<html>

<head>
<script type="text/javascript">
<!--
window.onload=function()
{
	document.getElementById('onclick').onclick=function()
	{
	var check=document.getElementsByTagName('input'),
	divs=document.getElementsByTagName('div'),i=0;
	for(var i;i<check.length,i<divs.length;i++)
	{
	divs[i].style.display='none';
	if(check[i].type=='checkbox')
		{
		if(check[i].checked==true)
		divs[i].style.display='';
		}}}}
//-->
</script>
</head>

<body>

<form>
<input type="checkbox" name="modtype" value="value1" /><label>value1</label>
<input type="checkbox" name="modtype" value="value2" /><label>value2</label>
<input type="checkbox" name="modtype" value="value3" /><label>value3</label>
<input type="checkbox" name="modtype" value="value4" /><label>value4</label>
<input type="checkbox" name="modtype" value="value5" /><label>value5</label>
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2">Show Div 2</div>
<div class="row" id="div3">Show Div 3</div>
<div class="row" id="div4">Show Div 4</div>
<div class="row" id="div5">Show Div 5</div>
<br>
<input type="button" name="onclick" id="onclick" value="Submit">
<br>
</form>
</body>
</html>

**golmiami** · 05-30-2008, 03:17 AM

thanks a million!!!
it was of immeasurable help your assistance

**golmiami** · 05-31-2008, 02:31 AM

I modify the js because I wanted to show TR instead of divs, it works fine. It is just when I use a second form to call the same function that obliviously won't work. Is variable to be added to make it work as in the first form? thanks for your guidance! here is the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Build from Markup</title>

<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/tabview/tabview-min.js"></script>
<script type="text/javascript">

</script>


</head>

<body class=" yui-skin-sam">

<h1>Build from Markup</h1>

<div class="exampleIntro">
<p>This demonstrates how to build a TabView from markup.</p>

</div>



<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab One Label</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>

</ul>
<div class="yui-content">
<div id="tab1"><p>
<form><label></label><label></label>
<table width="953" border="1">
<tr id="dd1">
<td width="943" >1</td>
<td width="943" ><input type="checkbox" name="modtype2" value="value1" />
<label>value1</label></td>
</tr>
<tr id="dd2">
<td >2</td>
<td ><input type="checkbox" name="modtype3" value="value2" />
<label>value2</label></td>
</tr>
<tr id="dd3">
<td >3</td>
<td ><input type="checkbox" name="modtype4" value="value3" />
<label>value3</label></td>
</tr>
<tr id="dd4">
<td >4</td>
<td ><input type="checkbox" name="modtype5" value="value4" />
<label>value4</label></td>
</tr>
<tr id="dd5">
<td >5</td>
<td ><input type="checkbox" name="modtype" value="value5" />
<label>value5</label></td>
</tr>
</table>

<br>
<input type="button" name="onclick" id="onclick" onClick="compareRows()" value="Compare">
<br>
</form>

</p></div>
<div id="tab2"><p>
<form><label></label><label></label>
<table width="953" border="1">
<tr id="d1">
<td width="943" >1</td>
<td width="943" ><input type="checkbox" name="modtype2" value="value1" />
<label>value1</label></td>
</tr>
<tr id="d2">
<td >2</td>
<td ><input type="checkbox" name="modtype3" value="value2" />
<label>value2</label></td>
</tr>
<tr id="d3">
<td >3</td>
<td ><input type="checkbox" name="modtype4" value="value3" />
<label>value3</label></td>
</tr>
<tr id="d4">
<td >4</td>
<td ><input type="checkbox" name="modtype5" value="value4" />
<label>value4</label></td>
</tr>
<tr id="d5">
<td >5</td>
<td ><input type="checkbox" name="modtype" value="value5" />
<label>value5</label></td>
</tr>
</table>

<br>
<input type="button" name="onclick" id="onclick" onClick="compareRows()" value="Compare">
<br>
</form>

</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');

YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>

</body>
</html>

**golmiami** · 06-02-2008, 01:28 AM

in other words how do I refer two forms to the same fuctions ia a page
This function brings up the only raws selected when I click compare. The problem is that I have the same form twice. How can solve this?

Code:

<html>

<head>
<script type="text/javascript">
<!--
window.onload=function()
{
	document.getElementById('onclick').onclick=function()
	{
	var check=document.getElementsByTagName('input'),
	divs=document.getElementsByTagName('tr'),i=0;
	for(var i;i<check.length,i<divs.length;i++)
	{
	divs[i].style.display='none';
	if(check[i].type=='checkbox')
		{
		if(check[i].checked==true)
		divs[i].style.display='';
		}}}}
//-->
</script>
</head>

<body>

<form><label></label><label></label>
  <table width="953" border="1">
  <tr id="dd1">
    <td width="829" >1</td>
    <td width="108" ><input type="checkbox" name="modtype2" value="value1" />
      <label>value1</label></td>
  </tr>
  <tr id="dd2">
    <td >2</td>
    <td ><input type="checkbox" name="modtype3" value="value2" />
      <label>value2</label></td>
  </tr>
  <tr id="dd3">
    <td >3</td>
    <td ><input type="checkbox" name="modtype4" value="value3" />
      <label>value3</label></td>
  </tr>
  <tr id="dd4">
    <td >4</td>
    <td ><input type="checkbox" name="modtype5" value="value4" />
      <label>value4</label></td>
  </tr>
  <tr id="dd5">
    <td >5</td>
    <td ><input type="checkbox" name="modtype" value="value5" />
      <label>value5</label></td>
  </tr>
</table>


<br>
<input type="button" name="onclick" id="onclick" value="Compare">
<br>
</form>

<form><label></label><label></label>
  <table width="953" border="1">
  <tr id="dd1">
    <td width="829" >1</td>
    <td width="108" ><input type="checkbox" name="modtype2" value="value1" />
      <label>value1</label></td>
  </tr>
  <tr id="dd2">
    <td >2</td>
    <td ><input type="checkbox" name="modtype3" value="value2" />
      <label>value2</label></td>
  </tr>
  <tr id="dd3">
    <td >3</td>
    <td ><input type="checkbox" name="modtype4" value="value3" />
      <label>value3</label></td>
  </tr>
  <tr id="dd4">
    <td >4</td>
    <td ><input type="checkbox" name="modtype5" value="value4" />
      <label>value4</label></td>
  </tr>
  <tr id="dd5">
    <td >5</td>
    <td ><input type="checkbox" name="modtype" value="value5" />
      <label>value5</label></td>
  </tr>
</table>


<br>
<input type="button" name="onclick" id="onclick" value="Compare">
<br>
</form>



</body>
</html>

**jscheuer1** · 06-02-2008, 03:15 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Two Forms - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!-- 
.wide {
width:829px;
}
.narrow {
width:108px;
}
.comp {
margin: 1em 0;
}
 -->
</style>
<script type="text/javascript">
<!--
if(document.getElementById)
window.onload=function(){
var buts = ['but1', 'but2'],
  findTr = function(el){
    while (el.parentNode){
    el = el.parentNode;
    if (el.tagName.toLowerCase() == 'tr')
      return el;
    }
  return false;
};
   for (var i = buts.length - 1; i > -1; --i)
	document.getElementById(buts[i]).onclick = function(){
	var check = this.form.elements;
	for(var i = check.length - 1; i > -1 ; --i)
	if(check[i].type && check[i].type == 'checkbox' && !check[i].checked && findTr(check[i]))
		findTr(check[i]).style.display = 'none';
	};
};
// -->
</script>
</head>

<body>

<form action="#">
  <table width="953" border="1">
  <tr id="dd1a">
    <td class="wide">1</td>
    <td class="narrow"><input type="checkbox" name="modtype2a" value="value1">
      <label>value1</label></td>
  </tr>
  <tr id="dd2a">
    <td class="wide">2</td>
    <td class="narrow"><input type="checkbox" name="modtype3a" value="value2">
      <label>value2</label></td>
  </tr>
  <tr id="dd3a">
    <td class="wide">3</td>
    <td class="narrow"><input type="checkbox" name="modtype4a" value="value3">
      <label>value3</label></td>
  </tr>
  <tr id="dd4a">
    <td class="wide">4</td>
    <td class="narrow"><input type="checkbox" name="modtype5a" value="value4">
      <label>value4</label></td>
  </tr>
  <tr id="dd5a">
    <td class="wide">5</td>
    <td class="narrow"><input type="checkbox" name="modtypea" value="value5">
      <label>value5</label></td>
  </tr>
</table>



<div class="comp">
<input type="button" name="onclick2" id="but1" value="Compare">
</div>

</form>

<form action="#">
  <table width="953" border="1">
  <tr id="dd1b">
    <td class="wide">1</td>
    <td class="narrow"><input type="checkbox" name="modtype2b" value="value1">
      <label>value1</label></td>
  </tr>
  <tr id="dd2b">
    <td class="wide">2</td>
    <td class="narrow"><input type="checkbox" name="modtype3b" value="value2">
      <label>value2</label></td>
  </tr>
  <tr id="dd3b">
    <td class="wide">3</td>
    <td class="narrow"><input type="checkbox" name="modtype4b" value="value3">
      <label>value3</label></td>
  </tr>
  <tr id="dd4b">
    <td class="wide">4</td>
    <td class="narrow"><input type="checkbox" name="modtype5b" value="value4">
      <label>value4</label></td>
  </tr>
  <tr id="dd5b">
    <td class="wide">5</td>
    <td class="narrow"><input type="checkbox" name="modtypeb" value="value5">
      <label>value5</label></td>
  </tr>
</table>



<div class="comp">
<input type="button" name="onclick2" id="but2" value="Compare">
</div>

</form>

</body>
</html>