I have a HTML table where I display some data. I have a problem when trying to do multiple selection.
If I click the checkbox on <th>
(which selects all rows), all checkboxes in tbody > tr
are selected - as expected. I click again and all deselect - as expected. If I click again the th checkbox it doesn't select anything inside tbody. How can I fix this issue?
$(document).ready(function() {
toggleDeleteButton = function() {
// alert($('.selector:checked').length);
if ($('.selector:checked').length) {
$('.btn-delete-selected').removeClass('disabled');
} else {
$('.btn-delete-selected').addClass('disabled');
}
}
function update_selection(obj) {
var state = obj.checked;
if (state === undefined) {
state = false;
}
$(obj).closest('table').find('input[type=checkbox][disabled!="disabled"]').attr('checked', state);
}
});
<script src="http://ift.tt/1oMJErh"></script>
<table class="table">
<thead>
<tr>
<th class=""><input onchange="update_selection(this); toggleDeleteButton();" type="checkbox"></th> // Selecting all
<th class="">
<a href="#">#</a>
</th>
<th class="">
<a href="#">Data #1</a>
</th>
<th class="">
<a href="#">Data #2</a>
</th>
</tr>
</thead>
<tbody>
<tr class="tr even incomplete ">
<td class="center"><input class="selector" value="57696" onchange="toggleDeleteButton();" type="checkbox"></td>
<td class="center">3</td>
<td class="text-right">£ 1.00</td>
<td class="center">Foo</td>
</tr>
<tr class="tr even incomplete ">
<td class="center"><input class="selector" value="57698" onchange="toggleDeleteButton();" type="checkbox"></td>
<td class="center">4</td>
<td class="text-right">£ 2.50</td>
<td class="center">FooBar</td>
</tr>
<tr class="tr even incomplete ">
<td class="center"><input class="selector" value="57720" onchange="toggleDeleteButton();" type="checkbox"></td>
<td class="center">5</td>
<td class="text-right">£ 3.00</td>
<td class="center">Bar</td>
</tr>
</tbody>
</table>
Aucun commentaire:
Enregistrer un commentaire