How To Filter Images By Category Using Input Form And Jquery?

For example I have a page where there are 4 images Filter:

Copy

Solution 2:

For type add a certain class (even if you do not want to...)

$('input[value="landscape"]').click(function(){
    $('.landClass').toggle();
});

$('input[value="abstract"]').click(function(){
    $('.absClass').toggle();
});

Fiddle: http://jsfiddle.net/maniator/3bk22/

Solution 3:

You may use the attribute alt of img

<img src="1" alt="abstract"/>

and jquery:

$(document).ready(function(){
    $('input[name="abstract"]').click(function(){
       $('img[alt="abstract"]').toggle();
})

     $('input[name="landscape"]').click(function(){
       $('img[alt="abstract"]').toggle();
})

});

Solution 4:

Try this: http://jsfiddle.net/shaneburgess/wTkR5/6/

$(document).ready(function(){

    $("#abstractCheck").change(function(){
       $(".abstract").toggle();
    });

     $("#landScapeCheck").change(function(){
       $(".landscape").toggle();
    });

});

HTML:

   <span class="abstract">
    <img src="1"/>
</span>

<span class="landscape">
   <img src="2" />
</span>

<span class="abstract">
   <img src="3" />
</span>

<span class="landscape">
   <img src="4" />
</span>