PDA

View Full Version : 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,



<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">
<!--
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('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.:confused: 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">
<!--
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" 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>

<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">
<!--
function compareRows()
{
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>
<!--there is no custom header content for this example-->

</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>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

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





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

golmiami
06-02-2008, 03:33 AM
Sorry about that.. :) thanks

jscheuer1
06-02-2008, 04:40 AM
Here is a 'leaner and meaner' version. The script is a little more efficient, and I think I've removed everything from the markup that doesn't need to be there. By using the class 'checker' to determine which checkboxes should be used by the script, you could have other checkboxes in the forms that do other things if you like:


<!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 && 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].className == 'checker' && !check[i].checked){
var tr = findTr(check[i]);
if (tr)
tr.style.display = 'none';
}
};
};
// -->
</script>
</head>

<body>

<form action="#">
<table border="1">
<tr>
<td class="wide">1</td>
<td class="narrow"><label><input class="checker" type="checkbox">
value1</label></td>
</tr>
<tr>
<td class="wide">2</td>
<td class="narrow"><label><input class="checker" type="checkbox">
value2</label></td>
</tr>
<tr>
<td class="wide">3</td>
<td class="narrow"><label><input class="checker" type="checkbox">
value3</label></td>
</tr>
<tr>
<td class="wide">4</td>
<td class="narrow"><label><input class="checker" type="checkbox">
value4</label></td>
</tr>
<tr>
<td class="wide">5</td>
<td class="narrow"><label><input class="checker" type="checkbox">
value5</label></td>
</tr>
</table>

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

</form>

<form action="#">
<table border="1">
<tr>
<td class="wide">1</td>
<td class="narrow"><label><input class="checker" type="checkbox">
value1</label></td>
</tr>
<tr>
<td class="wide">2</td>
<td class="narrow"><label><input class="checker" type="checkbox">
value2</label></td>
</tr>
<tr>
<td class="wide">3</td>
<td class="narrow"><label><input class="checker" type="checkbox">
value3</label></td>
</tr>
<tr>
<td class="wide">4</td>
<td class="narrow"><label><input class="checker" type="checkbox">
value4</label></td>
</tr>
<tr>
<td class="wide">5</td>
<td class="narrow"><label><input class="checker" type="checkbox">
value5</label></td>
</tr>
</table>

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

</form>

</body>
</html>

Notes: You can have other things, like id's, values and names for things that don't have them, but those are not required for the script. If you do use id's though, remember - only one element with a given id per page. Also, if using names for forms or form elements, these would be used by the form if submitted.

XenMaster
02-13-2013, 04:39 PM
Hi,

I used this code:


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


<img src="Toronto_area_.jpg" align="middle" alt="" id="Map"/>




<form>
<input type="checkbox" name="modtype" value="value1" /><label><img src="http://www.unitedwaytoronto.com/images/agency/mapIcons/mapGreenCircle.jpg" /> Priority Neighbourhoods, all including Action for Neighbourhood Change</label><br />
<input type="checkbox" name="modtype" value="value2" /><label><img src="http://www.unitedwaytoronto.com/images/agency/mapIcons/mapBlackTriangle.jpg" /> United Way member agencies and their satellite programs</label><br />
<input type="checkbox" name="modtype" value="value3" /><label><img src="http://www.unitedwaytoronto.com/images/agency/mapIcons/mapBlueDot.gif" /> Grant funded agencies</label><br />
<input type="checkbox" name="modtype" value="value4" /><label><img src="http://www.unitedwaytoronto.com/images/agency/mapIcons/mapLightBlueDot.gif" /> Youth Challenge Fund initiatives</label><br />


<div class="row" id="div1">
<a href="#location1" style="position: absolute; top:280px; left:190px; text-decoration:none;" class="various"><img src="http://www.unitedwaytoronto.com/images/agency/mapIcons/mapGreenCircle.jpg" /></a>
<span id="location1" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, nulla eu interdum posuere, nisi mauris cursus nisi, nec faucibus nibh urna nec turpis.</span>

<a href="#location2" style="position: absolute; top:120px; left:50px; text-decoration:none;" class="various"><img src="http://www.unitedwaytoronto.com/images/agency/mapIcons/mapGreenCircle.jpg" /></a>
<span id="location2" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, nulla eu interdum posuere, nisi mauris cursus nisi, nec faucibus nibh urna nec turpis.</span>
</div>

<div class="row" id="div2">
<a href="#BlackTri" style="position: absolute; top:350px; left:80px; text-decoration:none;" class="various"><img src="http://www.unitedwaytoronto.com/images/agency/mapIcons/mapBlackTriangle.jpg" /></a>
<span id="BlackTri" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, nulla eu interdum posuere, nisi mauris cursus nisi, nec faucibus nibh urna nec turpis.</span>
</div>

<div class="row" id="div3">
<a href="#BlueDot" style="position: absolute; top:150px; left:80px; text-decoration:none;" class="various"><img src="http://www.unitedwaytoronto.com/images/agency/mapIcons/mapBlueDot.gif" /></a>
<span id="BlueDot" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, nulla eu interdum posuere, nisi mauris cursus nisi, nec faucibus nibh urna nec turpis.</span>
</div>

<div class="row" id="div4">
<a href="#LightBlueDot" style="position: absolute; top:350px; left:220px; text-decoration:none;" class="various"><img src="http://www.unitedwaytoronto.com/images/agency/mapIcons/mapLightBlueDot.gif" /></a>
<span id="LightBlueDot" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, nulla eu interdum posuere, nisi mauris cursus nisi, nec faucibus nibh urna nec turpis.</span>
</div>



<input type="button" name="onclick" id="onclick" value="Submit">

</form>




I have 2 questions:

1 - how do I get it.. so it doesn't show any divs on page load, instead of it loading all the divs like it does right now.

2 - can I get it to load the divs when the checkbox is clicked .. and get rid of the Submit button.?


Thanks