Skip to content

Instantly share code, notes, and snippets.

@Sudheendra123

Sudheendra123/table.html

Last active February 17, 2023 11:57
Show Gist options
  • Save Sudheendra123/e43683253f82b199eab95efbd5e63c62 to your computer and use it in GitHub Desktop.
Save Sudheendra123/e43683253f82b199eab95efbd5e63c62 to your computer and use it in GitHub Desktop.
Download ZIP
Table with Checkbox and checkall options
Raw
table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Table Checkbox Select All and Cancel</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h2>Bootstrap Table Checkbox Select All and Cancel</h2>
<table class="table table-striped">
<tr>
<th class="active">
<input type="checkbox" class="select-all checkbox" name="select-all" />
</th>
<th class="success">Name</th>
<th class="warning">Gender</th>
<th class="danger">Age</th>
</tr>
<tr>
<td class="active">
<input type="checkbox" class="select-item checkbox" name="select-item" value="1000" />
</td>
<td class="success">sudhi</td>
<td class="warning">boy</td>
<td class="danger">20</td>
</tr>
<tr>
<td class="active">
<input type="checkbox" class="select-item checkbox" name="select-item" value="1001" />
</td>
<td class="success">kiran</td>
<td class="warning">boy</td>
<td class="danger">21</td>
</tr>
<tr>
<td class="active">
<input type="checkbox" class="select-item checkbox" name="select-item" value="1002" />
</td>
<td class="success">Prasanna</td>
<td class="warning">boy</td>
<td class="danger">22</td>
</tr>
<tr>
<td class="active">
<input type="checkbox" class="select-item checkbox" name="select-item" value="1003" />
</td>
<td class="success">shruthi </td>
<td class="warning">girl</td>
<td class="danger">23</td>
</tr>
</table>
<button id="select-all" class="btn button-default">SelectAll/Cancel</button>
</body>
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function(){
//button select all or cancel
$("#select-all").click(function () {
var all = $("input.select-all")[0];
all.checked = !all.checked
var checked = all.checked;
$("input.select-item").each(function (index,item) {
item.checked = checked;
});
});
//column checkbox select all or cancel
$("input.select-all").click(function () {
var checked = this.checked;
$("input.select-item").each(function (index,item) {
item.checked = checked;
});
});
//check selected items
$("input.select-item").click(function () {
var checked = this.checked;
var all = $("input.select-all")[0];
var total = $("input.select-item").length;
var len = $("input.select-item:checked:checked").length;
all.checked = len===total;
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment