SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hiding DIVs based on checkbox selection

    I'm wanting to hide certain divs within a container. If the sub div DOESN'T have a checkbox which is selected in it, then it should be hidden when you click the link.
    eg:
    if #2 and #5 checbox only where selected then divs(sub_1,sub_3,sub_4) would be hidden when link was clicked.

    Code HTML4Strict:
    <a href="">click me to hide unselected sub divs</a>
    <div id="container">
    <div id="sub_1">
    <input type="checkbox" id="select_1">
    </div>
    <div id="sub_2">
    <input type="checkbox" id="select_2">
    </div>
    <div id="sub_3">
    <input type="checkbox" id="select_3">
    </div>
    <div id="sub_4">
    <input type="checkbox" id="select_4">
    </div>
    <div id="sub_5">
    <input type="checkbox" id="select_5">
    </div>
    </div>

    Want to do this in jquery if that is easier. Any help would be appreciated.
    Many thanks

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do something like this:
    //get all the input fields
    var myCheckbox = document.getElementsByTagName('input');
    //process each input field
    var z = 0; var zMax = myCheckbox.length;
    while(z < zMax) {
    if(myCheckbox[z].getAttribute('type') == 'checkbox' && myCheckbox[z].checked == true) {
    myCheckbox[z].parentNode.style.display = 'none';
    }
    z++;
    }

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I can hack that to work for what I need.
    But is there a jquery or neater way, as my webpage may have other, unlrelated checkboxes that shouldn't be looped thru?
    again thx mate

  4. #4
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To separate your target checkboxes from the rest, you would have to give them a class that would permit you to target them. I have modified the previously posted code
    //get all the input fields
    var myCheckbox = document.getElementsByTagName('input');
    //process each input field
    var z = 0; var zMax = myCheckbox.length;
    while(z < zMax) {
    if(myCheckbox[z].getAttribute('type') == 'checkbox' && myCheckbox[z].className == 'myClass' && myCheckbox[z].checked == true) {
    myCheckbox[z].parentNode.style.display = 'none';
    }
    z++;
    }

    if jQuery is what you really want to use, you would still have to give your target checkboxes a class that would permit you to target them:
    $('.myClass:checked').parent().css('display', 'none');

    This should work....

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The checkboxes have an ID, like select_1, select_2 etc.
    Yeah would like to do the whole thing with jquery if possible,.
    And it is the checkbox that ISN'T checked that the containing DIV (which isn't actually a direct parent, more like a grand grand grand parent) needs to become hidden. (the containing div has the same number in ID, eg sub_1, sub 2)

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by LuckyB View Post
    The checkboxes have an ID, like select_1, select_2 etc.
    Yeah would like to do the whole thing with jquery if possible,.
    And it is the checkbox that ISN'T checked that the containing DIV (which isn't actually a direct parent, more like a grand grand grand parent) needs to become hidden. (the containing div has the same number in ID, eg sub_1, sub 2)
    You can make use of the :not selector.

    A quick test shows that this works well:

    Code javascript:
    $('#container :checkbox:not(:checked)').hide();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, that hides the unchecked checkboxes very well but I need to hide their individual containing DIVs - which are about 5 parents above, or have an ID with the same number:
    select_1's containing DIV is sub_1 etc.

  8. #8
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or all, the parent container DIVs also have the class of "subdiv"

  9. #9
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried this, but doesn't work:
    Code JavaScript:
    $('#container :checkbox:not(:checked)').parent('.subdiv').hide();

  10. #10
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, this works:
    Code JavaScript:
    $('#container:checkbox:not(:checked)').parent().parent().parent().parent().parent().hide();

    But if I could reference the parent via its ID or class it would be neater, as in the future this way if another parent element is introduced the javascript will not function as it should.

  11. #11
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for getting me on the right track. I discovered "parents" which is what I needed.

    Worked it out:
    Code JavaScript:
    $('#container:checkbox:not:checkbox:not(:checked)').parents(".subdiv").hide();

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Good job.

    You may want to tidy up and remove this duplicate set of pseudo-selectors
    :checkbox:not
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •