Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Show/Hide Div with checkbox options providing same results

  1. #1
    Join Date
    Dec 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Show/Hide Div with checkbox options providing same results

    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!

  2. #2
    Join Date
    Nov 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  3. #3
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb is this posible?

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

  4. #4
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  6. #6
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up This is it!!:o

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

  7. #7
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  8. #8
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,005
    Thanks
    44
    Thanked 3,204 Times in 3,166 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default uppss!

    Sorry about that.. thanks

Bookmarks

Posting Permissions

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