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

<imgsrc="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:

<spanclass="abstract"><imgsrc="1"/></span><spanclass="landscape"><imgsrc="2" /></span><spanclass="abstract"><imgsrc="3" /></span><spanclass="landscape"><imgsrc="4" /></span>