Demo of select or deselect of thumbnails by clicking using JQuery




*

STYLE


<style>
.checked {border:solid 2px red;background:#ffff00;}
</style>

HTML

<div id=d2>
<div class="row">
<div class="col-md-3"><img src=../images/8954.jpg id=1 class='select_img'></div>
<div class="col-md-3"><img src=../images/8953.jpg id=2 class='select_img'></div>
<div class="col-md-3"><img src=../images/8972.jpg id=3 class='select_img'></div>
<div class="col-md-3"><img src=../images/8979.jpg id=4 class='select_img'></div>
</div>
</div>
<br><br>
<br>
<div id=display>*</div>

JQuery

<script>
$(document).ready(function() {
////////////////////////
var image_selected = new Array();

//////////////
 $('#d2').on('click', ".select_img", function () {
	 
        var aa = $(this)
        if( !aa.is('.checked')){
            aa.addClass('checked');
		        
var my_id=this.id;
image_selected.push(my_id);

        } else {
            aa.removeClass('checked');
            var my_id=this.id;
			var index = image_selected.indexOf(my_id);
			if (index > -1) {
			image_selected.splice(index, 1);
			}
        }
	$('#display').html("ID of selected images :"+image_selected);
    })

///////////////////

})</script>