Selection and Deselection of elements by user in jQuery

We can select of or deselect elements from a group by clicking on it. This works in same way as checkbox but we will not use any checkbox here.

Selecting thumbnail images

We have a group of images with different id and user can select or deselect the images by clicking on it. All images have common class ( class='select_img' ).

We will keep one array which will add the id of the image on selection and remove the id if it is deselected.

Selecting records in a table

We will display records as rows in a table and user can select or deselect records. For each selection or deselection records Ids can be added or removed from JavaScript array.

Tutorial on how to collect records from database table

Adding style while selecting , removing style while deselecting.

We will add border and change the background color of selected element by adding style to the element. While deselecting we will remove the style.
Here is the style declaration
.checked {border:solid 2px red;background:#ffff00;}
To add or remove style
aa.removeClass('checked'); // Remove Class
aa.addClass('checked'); // Add Class 

Adding and removing record ID

We will declare one JavaScript array (record_selected )and on every selection of the record ( or image ) we will read the ID of it and add it to the array by using push function. Similarly once we deselect the element the respective ID will be removed from the array by using splice function.
As we will be using the array inside functions so we will declare it as global array.
Here it is how we will collect the id and add to our Array ( on Selection )
var;// collect id
record_selected.push(my_id);// add to array 
Here it is how we will remove the id after deselection of the element.
var index = record_selected.indexOf(my_id);
if (index > -1) {
record_selected.splice(index, 1);
To display all elements of the array we will use one div tag
$('#display').html("ID of selected images :"+record_selected);
The complete JQuery code is here, you will get full code with HTML and Style in above DEMO pages
$(document).ready(function() {
var record_selected = new Array();// declar global array
 $('#d2').on('click', ".select_record", function () {
        var aa = $(this)
        if( !'.checked')){

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



* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here .

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer