How to select multiple rows on HTML table using jQuery

Introduction

In this tutorial we will see how to check or select multiple checkboxes on HTML table using jQuery. We will put checkbox against each row on the table so that user will be able to select a particular row. We will also put a checkbox on the table header and selecting this checkbox all rows on the table will be selected. Unchecking the header checkbox will uncheck the checkbox.

We are using jQuery to check or check the checkbox. If user selects manually all checkboxes for rows on the table then the checkbox in table header will be checked automatically to show that all checkboxes on the table body are checked. If any of the checkboxes on the table body gets unchecked the header checkbox will be unchecked automatically.

Prerequisites

jQuery 3.5.0

Table Data

First we will see how to put some sample data or products on HTML table. We write the below code into a file called select-multiple-rows-html-table-jquery.html.

We have included jQuery from CDN link and the required jQuery code from app.js file.We have also included CSS file table.css to apply some basic style on HTML table.

We have put 8 rows in the table body and a header. In header we have put one checkbox to check all checkboxes in the table body. We have also individual checkbox to select the individual row.

We have put name for each checkbox and value with product id.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Multiple Table Rows Selection Example using jQuery</title>
	<link rel="stylesheet" type="text/css" href="table.css"/>
	<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
	<script src="app.js"></script>
</head>
<body>

<div>
	<h1>Multiple Table Rows Selection Example using jQuery</h1>

	<div id="body">
        <table class="datatable">
            <thead>
				<tr>
					<th><input id="check_all" type="checkbox"></th>
					<th>ID</th>
					<th>Code</th>
					<th>Name</th>
					<th>Price</th>
                </tr>
            </thead>
			<tbody>
				<tr class="odd_col">
					<td><input type="checkbox" name="row-check" value="1"></td>
					<td>1</td>
					<td>AMTR01</td>
					<td>American Tourist</td>
					<td>12000</td>
				</tr>
				<tr class="even_col">
					<td><input type="checkbox" name="row-check" value="2"></td>
					<td>2</td>
					<td>USB02</td>
					<td>EXP Portable Hard Drive</td>
					<td>5000</td>
				</tr>
				<tr class="odd_col">
					<td><input type="checkbox" name="row-check" value="3"></td>
					<td>3</td>
					<td>SH03</td>
					<td>Shoes</td>
					<td>1000</td>
				</tr>
				<tr class="even_col">
					<td><input type="checkbox" name="row-check" value="4"></td>
					<td>4</td>
					<td>LPN4</td>
					<td>XP 1155 Intel Core Laptop</td>
					<td>80000</td>
				</tr>
				<tr class="odd_col">
					<td><input type="checkbox" name="row-check" value="5"></td>
					<td>5</td>
					<td>3DCAM01</td>
					<td>FinePix Pro2 3D Camera</td>
					<td>150000</td>
				</tr>
				<tr class="even_col">
					<td><input type="checkbox" name="row-check" value="6"></td>
					<td>6</td>
					<td>MB06</td>
					<td>Simple Mobile</td>
					<td>3000</td>
				</tr>
				<tr class="odd_col">
					<td><input type="checkbox" name="row-check" value="7"></td>
					<td>7</td>
					<td>WristWear03</td>
					<td>Luxury Ultra thin Wrist Watch</td>
					<td>3000</td>
				</tr>
				<tr class="even_col">
					<td><input type="checkbox" name="row-check" value="8"></td>
					<td>8</td>
					<td>HD08</td>
					<td>Headphone</td>
					<td>400</td>
				</tr>
			</tbody>
		</table>
    </div>
</div>
</body>
</html>

Check/uncheck using jQuery

Now we will write jQuery code in app.js file to check or uncheck the checkboxes.

If we click on the header checkbox then we select all checkboxes on the table body.

If we check each checkbox manually and when we check all checkboxes eventually then we also check the header checkbox.

$(function() {
	//If check_all checked then check all table rows
	$("#check_all").on("click", function () {
		if ($("input:checkbox").prop("checked")) {
			$("input:checkbox[name='row-check']").prop("checked", true);
		} else {
			$("input:checkbox[name='row-check']").prop("checked", false);
		}
	});

	// Check each table row checkbox
	$("input:checkbox[name='row-check']").on("change", function () {
		var total_check_boxes = $("input:checkbox[name='row-check']").length;
		var total_checked_boxes = $("input:checkbox[name='row-check']:checked").length;

		// If all checked manually then check check_all checkbox
		if (total_check_boxes === total_checked_boxes) {
			$("#check_all").prop("checked", true);
		}
		else {
			$("#check_all").prop("checked", false);
		}
	});
});

Apply Style

We apply some basic style on the HTML table. We make the header black. We apply color on odd or even rows of the HTML table. We transform the lowercase letters to uppercase letters for headers.

table.datatable {
	width:100%;
	border: none;
	background:#fff;
}
table.datatable td.table_foot {
	border: none;
	background: #fff;
	text-align: center;
}
table.datatable tr.odd_col {
	background: none;
}
table.datatable tr.even_col {
	background: #ddd;
}
table.datatable td {
	font-size:10pt;
	padding:5px 10px;
	border-bottom:1px solid #ddd;
	text-align: left;
}
table.datatable th {
	text-align: left;
	font-size: 8pt;
	padding: 10px 10px 7px;   
	text-transform: uppercase;
	color: #fff;
	background-color: black;
	font-family: sans-serif;
}

Testing the Aplication

Now we will test the tiny application. The video shows how it works.

Download

Thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *