Question

I was trying to create a checkbox for images where if we have multiple images I can select 3 or 4 images before proceeding ahead. I have seen this kind of thing but I don’t know how to create the same using jquery.

For example in this image I would like to give an option that if some one clicks on the image it gets selected. User can select multiple images like this. Is it possible using jquery? or is there a plugin which can help me to achieve this.

Answer 1

This may be sufficient for your needs. Of course you can edit the script and css to be styled how you like:

$('.image-checkbox-container img').live('click', function(){
    if(!$(this).prev('input[type="checkbox"]').prop('checked')){
        $(this).prev('input[type="checkbox"]').prop('checked', true).attr('checked','checked');
        this.style.border = '4px solid #38A';
        this.style.margin =' 0';
    }else{
        $(this).prev('input[type="checkbox"]').prop('checked', false).removeAttr('checked');
        this.style.border = '0';
        this.style.margin = '4px';
    }
});

CSS:

.image-checkbox-container input[type="checkbox"]{
    display: none;
}

.image-checkbox-container img{
    border: 0;
    margin: 4px;
}

Here is a JSFIddle Example