Jquery select all checkboxes in table
You need to use .prop() instead of .attr()
$('#selectAll').click(function(e){
var table= $(e.target).closest('table');
$('td input:checkbox',table).prop('checked',this.checked);
});
Demo: Fiddle
Attributes vs. Properties
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</HEAD>
<BODY>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Droid X</td>
<td>4.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>HTC Desire</td>
<td>3/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
<td>Apple iPhone 4</td>
<td>5/5</td>
</tr>
</table>
</BODY>
</HTML>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
oTable = $('#datatable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
$("#selectall").click(function () {
var checkAll = $("#selectall").prop('checked');
if (checkAll) {
$(".case").prop("checked", true);
} else {
$(".case").prop("checked", false);
}
});
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").prop("checked", true);
} else {
$("#selectall").prop("checked", false);
}
});
} );
</script>
This might be useful on the difference between prop() and attr(). Note this line in this article .prop() vs .attr():
"The attribute value reflects the default rather than the current visible state (except in some older versions of IE, thus making things still harder). The attribute tells you nothing about the whether the checkbox on the page is checked."
So in general, use prop() instead of attr().
Simple jQuery solution, with detection of checked inputs inside of the table, and state change for main (selectAll) checkbox:
$(document).ready(function() {
var $selectAll = $('#selectAll'); // main checkbox inside table thead
var $table = $('.table'); // table selector
var $tdCheckbox = $table.find('tbody input:checkbox'); // checboxes inside table body
var tdCheckboxChecked = 0; // checked checboxes
// Select or deselect all checkboxes depending on main checkbox change
$selectAll.on('click', function () {
$tdCheckbox.prop('checked', this.checked);
});
// Toggle main checkbox state to checked when all checkboxes inside tbody tag is checked
$tdCheckbox.on('change', function(e){
tdCheckboxChecked = $table.find('tbody input:checkbox:checked').length; // Get count of checkboxes that is checked
// if all checkboxes are checked, then set property of main checkbox to "true", else set to "false"
$selectAll.prop('checked', (tdCheckboxChecked === $tdCheckbox.length));
})
});table {
width: 100%;
border-collapse: collapse;
border: 2px solid #222;
}
table tr th {
background: #333;
color: #eee;
}
table tr:nth-child(odd) td {
background: #ececec;
}
td, th {
padding: 10px 14px;
text-align: center;
border: none;
}
.checkbox {
position: relative;
}
.checkbox [type="checkbox"] {
position: absolute;
visibility: hidden;
pointer-events: none;
}
.checkbox [type="checkbox"] + label {
position: relative;
display: block;
width: 20px;
height: 20px;
border: 2px solid;
cursor: pointer;
border-radius: 2px;
will-change: color;
transition: .2s color ease-in-out;
}
table thead .checkbox [type="checkbox"] + label:hover,
table thead .checkbox [type="checkbox"] + label:hover:after {
color: #d80;
}
table tbody .checkbox [type="checkbox"] + label:hover,
table tbody .checkbox [type="checkbox"] + label:hover:after {
color: #8d0;
}
.checkbox [type="checkbox"] + label:after {
content: '';
position: absolute;
width: 5px;
height: 12px;
top: 50%;
left: 50%;
border-bottom: 2px solid;
border-right: 2px solid;
margin-top: -2px;
opacity: 0;
transform: translate(-50%, 0%) rotate(45deg) scale(.75);
will-change: opacity, transform, color;
transition: .17s opacity ease-in-out, .2s transform ease-in-out, .2s color ease-in-out;
}
.checkbox [type="checkbox"]:checked + label:after {
opacity: 1;
transform: translate(-50%, -50%) rotate(45deg) scale(1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>
<div class="checkbox">
<input type="checkbox" id="selectAll">
<label for="selectAll"></label>
</div>
</th>
<th>Email</th>
<th>Join date <i class="arrow bottom"></i></th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>
<div class="checkbox">
<input type="checkbox" id="tr-checkbox1">
<label for="tr-checkbox1"></label>
</div>
</td>
<td>[email protected]</td>
<td>21 Oct, 2016 at 11:29 pm</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" id="tr-checkbox2">
<label for="tr-checkbox2"></label>
</div>
</td>
<td>[email protected]</td>
<td>03 Mar, 2018 at 08:36 am</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" id="tr-checkbox3">
<label for="tr-checkbox3"></label>
</div>
</td>
<td>[email protected]</td>
<td>11 Jan, 2020 at 01:47 am</td>
</tr>
</tbody>
</table>