#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    376
    Rep Power
    14

    Multiple checkbox filters


    hi.
    i have multiple checkbox filters and i would like if a person clicks on a checkbox than the other checkbox items that are empty will be hidden.
    this is the code that i have already:
    PHP Code:
    <script>
     $(
    document).ready(function(){
            var 
    getFilter = function(category) {
                var 
    filter = $("#filters ." category ":checked").map(function() {
                    return 
    "." this.value;
                }).
    get().join(",");
                
    filter = (filter.length 0) ? filter "*";
                
    //console.log(filter);
                

                
    return filter;
            }

            $(
    "#filters :checkbox").click(function() {
                var 
    all = $(".filterme");
                var 
    tgts all.filter(getFilter("vertical")).filter(getFilter("format"));
                
    all.not(tgts).hide("slide",0,3000);            
            });
        });
    </script>

    <div id="filters">
    <ul>
    <li><input type="checkbox" name="vertical" value="ver1">Vertical 1</li>
    <li><input type="checkbox" name="vertical" value="ver2">Vertical 2</li>
    <li><input type="checkbox" name="vertical" value="ver3">Vertical 3</li>
    </ul>
    <ul class="format">
    <li><input type="checkbox" name="format" value="for1">Format 1</li>
    <li><input type="checkbox" name="format" value="for2">Format 2</li>
    <li><input type="checkbox" name="format" value="for3">Format 3</li>
    </ul>
    <div id="result">
    <div class="filterme ver1 for2">Result 1</div>
    <div class="filterme ver1 for1 for2">Result 2</div>
    <div class="filterme ver2 for2">Result 3</div>
    <div class="filterme ver3 for1">Result 4</div>
    </div> 
    So basically if the user clicks Vertical 1 then the checkbox for Format 1 should be hidden since there is no class that has filterme ver1 for1.

    Does that make sense? Thanks.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Try this; I think it is what your wanting to do:
    Code:
    $("input[name='vertical']").click(function(){
     var index = $(this).parent().index();
       if(this.checked){
        $(".format li").eq(index).css("display","none");
       }
    });
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    376
    Rep Power
    14
    thanks but it doesn't seem to work. index gives me a value of 0. I also forgot to add the array sign in the checkbox names above so it should be name=vertical[].
    also since i have a bunch of filters i need it more generic so that once a user clicks on a checkbox option only the checkboxes that are available will be shown.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Originally Posted by ashabi
    thanks but it doesn't seem to work. index gives me a value of 0.
    Not sure what browser your using, but I have tested in: Chrome, FF, & IE... and everything works as expected. Once you click on a checkbox, in the "filters" div; the corresponding checkbox, in the "format" div; will be hidden. I thought that was what you were going for. If not, you will have to try to explain a little more; so I can get a better idea of what your wanting to do.
    Originally Posted by ashabi
    I also forgot to add the array sign in the checkbox names above so it should be name=vertical[]
    The way I have the code set-up; you would not need to add each key to the input name known as "vertical".
    Originally Posted by ashabi
    also since i have a bunch of filters i need it more generic so that once a user clicks on a checkbox option only the checkboxes that are available will be shown.
    Not quit sure what you mean, as all of the checkboxes are displayed; besides the corresponding checkboxes (to the checkbox that has been checked in the above div), in the lower div. So..., your going to have to elaborate on this to; so I can better help you.

    Oh... by the way... there is an error with your initialization code; you have this
    Code:
    $(document).ready(function(){
    And... it really should be this:
    Code:
    $("document").ready(function(){
    Not sure if that was a typo or not; but you may run into errors, if you leave it as such.
    Last edited by web_loone08; October 20th, 2013 at 10:04 AM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    376
    Rep Power
    14
    hi.
    ok so maybe i am not explaining properly. but when i test it out if i click on vertical 3 then format 1 and format 2 still show and really only format 1 should show based on the Result 4 which is the only one that has ver3 and for1 together.
    It should also work in reverse if I click on format 2 then vertical 3 should be hidden.
    Does that make more sense?
    Last edited by ashabi; October 20th, 2013 at 10:36 AM.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Originally Posted by web_loone08
    Oh... by the way... there is an error with your initialization code; you have this
    Code:
    $(document).ready(function(){
    And... it really should be this:
    Code:
    $("document").ready(function(){
    Not sure if that was a typo or not; but you may run into errors, if you leave it as such.
    Umm... no.

    When in quotes it's a selector. Selectors that are all alphabetical characters select HTML element names and there is no HTML element called "document". The documentation is your friend: http://api.jquery.com/ready/

    Carry on.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    376
    Rep Power
    14
    i assumed it was $(document).ready(function(){ without the quotes.
    But still can't figure out my original issue. Kravvitz any ideas?
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Originally Posted by Kravvitz
    Umm... no.

    When in quotes it's a selector. Selectors that are all alphabetical characters select HTML element names and there is no HTML element called "document". The documentation is your friend: http://api.jquery.com/ready/

    Carry on.
    Actually... not necessarily; both variations work, test for yourself:
    Code:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $("document").ready(function(){
       alert("Both Ways Must Be Correct Then... Because This Works To And It Is Alway What I Have Done & It Has Always Worked.");
    });
    </script>
    I assume "my version" identifies the object as a selector and the library reads it as one in the same. The only reason I would not use quotation marks, would be when referring to the window object (as I think I have tried to use qoatations with the window object and either I received an error or it just did not work... you know how jQuery can do that and not throw an error; I know I sure do... and... sometimes... I hate that... lol). And... in my defense I pointed out what I thought may cause an error, but given both variations are comparable and compatible/interchangeable; I was not exactly correct with pointing out what I thought was a possible error, but I had the OP's best interest in mind and my correction... it does work, as well... just saying.
    Originally Posted by Kravvitz
    i assumed it was $(document).ready(function(){ without the quotes.
    But still can't figure out my original issue. Kravvitz any ideas?
    And... yes... Kravvitz, please do tell your ideas on this OP's question; I will let you take it from here... lol.
    Last edited by web_loone08; October 20th, 2013 at 02:46 PM.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    376
    Rep Power
    14
    sorry i didn't mean to insult anyone.
    i have added this to the code but its still not searching through the results and disabling the correct checkboxes.
    PHP Code:
    var searchIDs = [];

                    $(
    "input:not(:checked)").each (function () {
                      
    searchIDs.push($(this).val());
                      if ($.
    inArray(allsearchIDs)===-1)
                        {
                            $(
    this).css("display","none");
                        }
                    }) 
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Part of the problem may be that your code is overcomplicated. Do you really need to handle the different categories separately?

    Did you not notice that getFilter() always returns "*"? The problem is that the checkboxes don't have classes; they have names.

    Except for the change from hide() to slideUp(), I only removed unnecessary code from what you posted:
    Code:
     $(document).ready(function(){
            $("#filters :checkbox").click(function() {
                var all = $(".filterme");
                var filter = $("#filters :checked").map(function() {
                    return "." + this.value;
                }).get().join(",");
                filter = (filter.length > 0) ? filter : "*";
                console.log(filter);
                all.not(filter).slideUp(3000);            
            });
        });
    P.S. Please use the label element to make your HTML forms accessible and more user friendly.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    376
    Rep Power
    14
    my issue is getting the checkboxes that are not checked off hidden if they have no results. so if a user clicks on vertical 1 than format 3 checkbox should be hidden since there is no result that has both vertical 1 and format 3 in it. (see code above).
  22. #12
  23. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Oh, right. You were asking about something that wasn't in your code. (Why do I keep assuming that the posted code mostly does what's intended...?)

    What you want to do is when one of the "vertical" checkboxes is checked, check if there's at least one element with both the "filterme" class and the class specified by the checkbox for each of the "format" checkboxes. If not, then you hide that format checkbox.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Posts
    376
    Rep Power
    14
    Correct
  26. #14
  27. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    So you're not sure how to write that in jQuery?

    Well for example, to check if an element has the "ver1" and "for1" classes, you do this:
    Code:
    var vertical = 'ver1', format = 'for1';
    if($('.filterme.'+vertical+'.'+format).length<1) {
      // hide the checkbox here
    }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo