Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts

    hide all divs except those with checked boxes?

    hello, I'm wondering how I can hide all divs on a page that do not have a checkbox thats checked.

    my html;

    PHP Code:
    <div id='2_ImageBlock' style='width: 170px; height: 170px; border: 1px solid grey; float: left; overflow:hidden;    padding: 3px; margin: 4px;'>
        <
    label><input type='checkbox' name='SelectedImage[]' id='SelectedImage' value='Image.jpg' /> Use Image<br />
        <
    img src='Image.jpg' width='150'  />
        </
    label>
    </
    div
    using jquery, maybe something like this?

    $('div:' + $("input:checkbox").not(":checked")).hide();

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    <div id='2_ImageBlock'

    An id may not start with a digit

    Do you mean that you want to show all the divs where the associated checkbox is checked and hide those where the checkbox is unchecked?
    Obviously the checkboxes must remain visible.


    Code:
    <input type="checkbox" id = "cbox1" onclick="showMe('div1', this)" checked>
    <div id="div1" style="display:block;">XYZ</div>
    
    <script type = "text/javascript">
    
    function showMe (whichdiv, box) {
    var vis = (box.checked) ? "block" : "none";
    document.getElementById(whichdiv).style.display = vis;
    }
    
    </script>
    It is your responsibility to die() if necessary….. - PHP Manual
    Last edited by Philip M; 12-19-2012 at 04:56 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    yes, thats been changed, but it doesn't solve anything...

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    if your html will always have that structure...
    Code:
    <script>
    var divs=document.getElementsByTagName("div")
      for (var i = 0; i < divs.length; i++) {
    divs[i].style.display=divs[i].children[0].children[0].checked?"block":"none";
    }
    </script>

  • Users who have thanked xelawho for this post:

    angst (12-19-2012)

  • #5
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    thats perfect, one last question. how can I exclude another static div?


    thanks again!

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    give the divs you want to operate on a class name (that way you can get rid of that ugly inline styling, too)...

    Code:
    <html>
    <head>
    <style>
    .imgcont{
    width: 170px; 
    height: 170px; 
    border: 1px solid grey; 
    float: left; 
    overflow:hidden;    
    padding: 3px; 
    margin: 4px;
    }
    </style>
    </head>
    <body>
    <input type="button" value="show 'em" onclick="showHide()"/><br>
    <div id='ImageBlock2' class='imgcont'> 
        <label><input type='checkbox' name='SelectedImage[]' id='SelectedImage' value='Image.jpg'/> Use Image<br /> 
        <img src='Image.jpg' width='150'  /> 
        </label> 
    </div>
    <div id='ImageBlock3' class='imgcont'> 
        <label><input type='checkbox' name='SelectedImage[]' id='SelectedImage' value='Image.jpg' /> Use Image<br /> 
        <img src='Image.jpg' width='150'  /> 
        </label> 
    </div>
    <script>
    function showHide(){
    var divs=document.getElementsByTagName("div")
      for (var i = 0; i < divs.length; i++) {
      if(divs[i].className=="imgcont"){
    divs[i].style.display=divs[i].children[0].children[0].checked?"block":"none";
    		}
    	}
    }
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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