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
    sac
    sac is offline
    New Coder
    Join Date
    Oct 2011
    Location
    London, UK
    Posts
    12
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Question Select results based on Criteria / checkbox > div

    Hi,

    I'm trying to build up a multi-select filter with checkboxes.

    I found few good scripts but I've got a problem to adapt them..

    The script below can filter results based on criteria (that you can select via checkboxes). The results displayed are checked or unchecked boxes.

    What I want is : display results with div (for ex:<div>result1</div>) and not checkbox.

    How can I do that?

    Code:
    <script type="text/javascript" src="js/jquery.js.css"></script>
    <script type="text/javascript">
    	$(function() {
        $('#search input:checkbox').click(function() {
            var classes = $('#search input:checkbox:checked').
                map(function() { return $(this).val(); }).get().join('.');
            classes = (classes ? '.' : '') + classes;
            $('#results input:checkbox').attr('checked', false).
                filter(classes).attr('checked', true);
        });
    });
    </script>
    </head>
    <body>
    <div id="search">
        <fieldset>
            <label><input type="checkbox" value="animal"> Animal</label>
            <label><input type="checkbox" value="vegetable"> Vegetable</label>
        </fieldset>
        <fieldset>
            <label><input type="checkbox" value="small"> Small</label>
            <label><input type="checkbox" value="large"> Large</label>
        </fieldset>
    </div>
    <div id="results">
        <p><input type="checkbox" class="small animal"> Cat</p>
        <p><input type="checkbox" class="medium animal"> Tiger</p>
        <p><input type="checkbox" class="large animal"> Elephant</p>
        <p><input type="checkbox" class="small vegetable"> Pea</p>
        <p><input type="checkbox" class="large vegetable"> Pumpkin</p>
    </div>
    
    </ul>
    </body>
    </html>
    Thanks for your help

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,912
    Thanks
    56
    Thanked 545 Times in 542 Posts
    here's one way it would look like without jQuery: I changed your checkboxes to radio buttons, because choosing animal and vegetable at the same time is kind of illogical...

    Code:
    <html>
    <head>
    <style>
    .hide{display:none}
    </style>
    <script type="text/javascript">
    var shownDiv;
    function checkBoxes() {
    if (shownDiv){shownDiv.style.display="none"}
    res=""
    field=document.getElementById("search")
    boxes=field.getElementsByTagName("input")
    for (var i = 0; i < boxes.length; i++) {
    if (boxes[i].checked==true){
    res+=boxes[i].value+" "
    		}
    	}
    	res=res.substring(0,res.length-1)
    shownDiv=document.getElementById(res)
    shownDiv.style.display="block"
    }
    
    </script>
    </head>
    <body>
    <div id="search">
        <fieldset>
            <label><input name="type" type="radio" value="animal"> Animal</label>
            <label><input name="type" type="radio"  value="vegetable"> Vegetable</label>
        </fieldset>
        <fieldset>
            <label><input name="size" type="radio"  value="small"> Small</label>
            <label><input name="size" type="radio"  value="large"> Large</label>
        </fieldset>
    </div>
    <input type ="button" value="show results" onclick="checkBoxes()"/>
    <div id="results">
        <div class="hide" id="animal small"> Cat</div>
        <div class="hide" id="animal medium"> Tiger</div>
        <div class="hide" id="animal large"> Elephant</div>
        <div class="hide" id="vegetable small"> Pea</div>
        <div class="hide" id="vegetable large"> Pumpkin</div>
    </div>
    </html>

  • #3
    sac
    sac is offline
    New Coder
    Join Date
    Oct 2011
    Location
    London, UK
    Posts
    12
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Thanks Xelawho,
    Interesting but's not really what I'm looking for. I want it without "submit" button. The idea is to sort it "live".

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,912
    Thanks
    56
    Thanked 545 Times in 542 Posts
    so call the function when the user clicks a radio button...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <style>
    .hide{display:none}
    </style>
    <script type="text/javascript">
    var shownDiv;
    function checkBoxes() {
    if (shownDiv){shownDiv.style.display="none"}
    res=""
    field=document.getElementById("search")
    boxes=field.getElementsByTagName("input")
    for (var i = 0; i < boxes.length; i++) {
    if (boxes[i].checked==true){
    res+=boxes[i].value+" "
    		}
    	}
    	res=res.substring(0,res.length-1)
    if(document.getElementById(res)){	
    shownDiv=document.getElementById(res)
    shownDiv.style.display="block"
    	}
    }
    
    </script>
    </head>
    <body>
    <div id="search">
        <fieldset>
            <label><input name="type" type="radio" onclick="checkBoxes()" value="animal"> Animal</label>
            <label><input name="type" type="radio"  onclick="checkBoxes()" value="vegetable"> Vegetable</label>
        </fieldset>
        <fieldset>
            <label><input name="size" type="radio" onclick="checkBoxes()"  value="small"> Small</label>
            <label><input name="size" type="radio" onclick="checkBoxes()"  value="large"> Large</label>
        </fieldset>
    </div>
    <div id="results">
        <div class="hide" id="animal small"> Cat</div>
        <div class="hide" id="animal medium"> Tiger</div>
        <div class="hide" id="animal large"> Elephant</div>
        <div class="hide" id="vegetable small"> Pea</div>
        <div class="hide" id="vegetable large"> Pumpkin</div>
    </div>
    </html>

  • #5
    sac
    sac is offline
    New Coder
    Join Date
    Oct 2011
    Location
    London, UK
    Posts
    12
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Hi Xelawho,

    thanks for your reply.

    I have to keep checkbox (and not radio button) because the idea is to have the possibility to select few options (in the same time).

    The idea is also to get a filter who shows the results with only ALL the options selected (for instance : only asian vegetable with spicy taste)...

    I found another code who works well apart the fact that it displays results with at least 1 option, and I want results with only ALL options..

    hope I'm clear..

    I attached an other script, because I'm not sure we can do that with the current one.
    Attached Files Attached Files

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,912
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I didn't look at your attachment, but I think I get the idea. You could do it just changing it over to checkboxes and playing around with the shownDiv code, but it depends on how far you're planning on extending the code. Maybe a good plan is to turn your items into objects and put them in an array for easier sorting. If you are only dealing with text, it's probably a better idea to display with innerHTML rather than showing and hiding divs, as well. Here's my idea, anyway...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <script type="text/javascript">
    
    var countrychecked=0;
    var typechecked=0;
    
    var foods=[]
    
    var fd=new food("asian","vegetarian","fried rice")
    var fd=new food("asian","vegetarian","pad thai")
    var fd=new food("asian","meat","green curry")
    var fd=new food("asian","meat","peking duck")
    var fd=new food("asian","soup","tom yum")
    var fd=new food("asian","soup","corn soup")
    
    var fd=new food("african","vegetarian","harissa")
    var fd=new food("african","vegetarian","injarra")
    var fd=new food("african","meat","goat curry")
    var fd=new food("african","meat","mutton cous cous")
    var fd=new food("african","soup","chickpea and kale")
    var fd=new food("african","soup","peanut soup")
    
    var fd=new food("indian","vegetarian","malai kofta")
    var fd=new food("indian","vegetarian","pindi chana")
    var fd=new food("indian","meat","lamb kofta")
    var fd=new food("indian","meat","tandoori chicken")
    var fd=new food("indian","soup","mulligatawny")
    var fd=new food("indian","soup","rasam")
    
    function food(country,style,name){
    this.country=country;
    this.style=style;
    this.name=name;
    foods.push(this)
    }
    
    function checkBoxes(box) {
    document.getElementById("results").innerHTML=""
    
    if (box.name=="country"){
    countrychecked=box.checked==true?countrychecked+=1:countrychecked-=1
    }
    if (box.name=="type"){
    typechecked=box.checked==true?typechecked+=1:typechecked-=1
    }
    
    
    if (countrychecked>0&&typechecked==0){
    for (var i = 0; i < foods.length; i++) {
    if (document.getElementById(foods[i].country).checked==true){
    document.getElementById("results").innerHTML+=foods[i].name+"<br>"		
    		}
    	}
    }
    
    else if ((countrychecked>0)&&(typechecked>0)){
    for (var i = 0; i < foods.length; i++) {
    if ((document.getElementById(foods[i].country).checked==true)&&(document.getElementById(foods[i].style).checked==true)){
    document.getElementById("results").innerHTML+=foods[i].name+"<br>"		
    		}
    	}
    }
    
    if (countrychecked==0&&typechecked>0){
    for (var i = 0; i < foods.length; i++) {
    if (document.getElementById(foods[i].style).checked==true){
    document.getElementById("results").innerHTML+=foods[i].name+"<br>"		
    		}
    	}
    }
    
    }
    </script>
    </head>
    <body>
    <div id="search">
        <fieldset>
            <label><input name="country" type="checkbox" onclick="checkBoxes(this)" id="asian"> Asian</label>
            <label><input name="country" type="checkbox"  onclick="checkBoxes(this)" id="african"> African</label>
    		<label><input name="country" type="checkbox"  onclick="checkBoxes(this)" id="indian"> Indian</label>
        </fieldset>
        <fieldset>
            <label><input name="type" type="checkbox" onclick="checkBoxes(this)" id="vegetarian"> Vegetarian</label>
            <label><input name="type" type="checkbox" onclick="checkBoxes(this)" id="meat"> Meat</label>
    		<label><input name="type" type="checkbox" onclick="checkBoxes(this)" id="soup"> Soup</label>
        </fieldset>
    </div>
    <div id="results"></div>
    </html>
    Last edited by xelawho; 01-16-2012 at 08:43 PM. Reason: forgot about if they choose a style but not a country :D


  •  

    Tags for this Thread

    Posting Permissions

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