I have a table with a list of checkboxes that are input alphabetically; some of them are already checked.
I want the checked checkboxes to go to the top of the list when the page loads and to revert to alphabetical order when a user unchecks a checkbox.
Although I've done something with my lame skills in JQuery, the checkboxes are not at the top of the list as you can see in the preview when the page loads.
$(document).ready(function() {
var table = $("#vm_table tbody");
$("input[type='checkbox']").change(function() {
var checkbox = $(this);
var tr = checkbox.closest("tr");
if (checkbox.is(":checked")) {
tr.prependTo(table);
} else {
table.find("tr").sort(function(a, b) {
var tda = $(a).find("td:first-child").text();
var tdb = $(b).find("td:first-child").text();
return tda.localeCompare(tdb);
}).appendTo(table);
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="vm_table">
<thead>
<tr>
<th scope="col">A-Z</th>
<th scope="col">Class</th>
</tr>
</thead>
<tbody>
<tr >
<td>
<label for="218">
<input type="checkbox" name="vms" value="218" id="218">A
</label>
</td>
<td id="schname">
A1<br>
</td>
</tr>
<tr >
<td>
<label for="219">
<input type="checkbox" name="vms" value="219" id="219">B
</label>
</td>
<td id="schname">
A1<br>
</td>
</tr>
<tr >
<td>
<label for="221">
<input type="checkbox" name="vms" value="221" id="221">C
</label>
</td>
<td id="schname">
A3<br>
</td>
</tr>
<tr >
<td>
<label for="222">
<input type="checkbox" name="vms" value="222" checked="" id="222">D
</label>
</td>
<td id="schname">
A1<br>
</td>
</tr>
<tr >
<td>
<label for="223">
<input type="checkbox" name="vms" value="223" id="223">E
</label>
</td>
<td id="schname">
</td>
</tr>
<tr >
<td>
<label for="224">
<input type="checkbox" name="vms" value="224" checked="" id="224">F
</label>
</td>
<td id="schname">
A1<br>
</td>
</tr>
<tr >
<td>
<label for="225">
<input type="checkbox" name="vms" value="225" checked="" id="225">G
</label>
</td>
<td id="schname">
B2<br>
</td>
</tr>
<tr >
<td>
<label for="226">
<input type="checkbox" name="vms" value="226" id="226">H
</label>
</td>
<td id="schname">
</td>
</tr>
<tr >
<td>
<label for="213">
<input type="checkbox" name="vms" value="213" id="213">I
</label>
</td>
<td id="schname">
</td>
</tr>
<tr >
<td>
<label for="216">
<input type="checkbox" name="vms" value="216" checked="" id="216">J
</label>
</td>
<td id="schname">
C3<br>
</td>
</tr>
<tr >
<td>
<label for="217">
<input type="checkbox" name="vms" value="217" checked="" id="217">K
</label>
</td>
<td id="schname">
B1<br>
</td>
</tr>
<tr >
<td>
<label for="215">
<input type="checkbox" name="vms" value="215" id="215">L
</label>
</td>
<td id="schname">
</td>
</tr>
<tr >
<td>
<label for="220">
<input type="checkbox" name="vms" value="220" id="220">M
</label>
</td>
<td id="schname">
</td>
</tr>
<tr >
<td>
<label for="214">
<input type="checkbox" name="vms" value="214" id="214">N
</label>
</td>
<td id="schname">
</td>
</tr>
</tbody>
</table>CodePudding user response：
You never order them, when the page first loads. You only order them in the change event.
You can order them on page load by adding this line
$("input[type='checkbox']:checked").closest("tr").prependTo(table);
like I did below.
$(document).ready(function() {
var table = $("#vm_table tbody");
$("input[type='checkbox']:checked").closest("tr").prependTo(table);
$("input[type='checkbox']").change(function() {
var checkbox = $(this);
var tr = checkbox.closest("tr");
if (checkbox.is(":checked")) {
tr.prependTo(table);
} else {
table.find("tr").sort(function(a, b) {
var tda = $(a).find("td:first-child").text();
var tdb = $(b).find("td:first-child").text();
return tda.localeCompare(tdb);
}).appendTo(table);
// Put the checked ones to the top of the table
$("input[type='checkbox']:checked").closest("tr").prependTo(table);
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="vm_table">
<thead>
<tr>
<th scope="col">A-Z</th>
<th scope="col">Class</th>
</tr>
</thead>
<tbody>
<tr >
<td>
<label for="218">
<input type="checkbox" name="vms" value="218" id="218">A
</label>
</td>
<td id="schname">
A1<br>
</td>
</tr>
<tr >
<td>
<label for="219">
<input type="checkbox" name="vms" value="219" id="219">B
</label>
</td>
<td id="schname">
A1<br>
</td>
</tr>
<tr >
<td>
<label for="221">
<input type="checkbox" name="vms" value="221" id="221">C
</label>
</td>
<td id="schname">
A3<br>
</td>
</tr>
<tr >
<td>
<label for="222">
<input type="checkbox" name="vms" value="222" checked="" id="222">D
</label>
</td>
<td id="schname">
A1<br>
</td>
</tr>
<tr >
<td>
<label for="223">
<input type="checkbox" name="vms" value="223" id="223">E
</label>
</td>
<td id="schname">
</td>
</tr>
<tr >
<td>
<label for="224">
<input type="checkbox" name="vms" value="224" checked="" id="224">F
</label>
</td>
<td id="schname">
A1<br>
</td>
</tr>
<tr >
<td>
<label for="225">
<input type="checkbox" name="vms" value="225" checked="" id="225">G
</label>
</td>
<td id="schname">
B2<br>
</td>
</tr>
<tr >
<td>
<label for="226">
<input type="checkbox" name="vms" value="226" id="226">H
</label>
</td>
<td id="schname">
</td>
</tr>
<tr >
<td>
<label for="213">
<input type="checkbox" name="vms" value="213" id="213">I
</label>
</td>
<td id="schname">
</td>
</tr>
<tr >
<td>
<label for="216">
<input type="checkbox" name="vms" value="216" checked="" id="216">J
</label>
</td>
<td id="schname">
C3<br>
</td>
</tr>
<tr >
<td>
<label for="217">
<input type="checkbox" name="vms" value="217" checked="" id="217">K
</label>
</td>
<td id="schname">
B1<br>
</td>
</tr>
<tr >
<td>
<label for="215">
<input type="checkbox" name="vms" value="215" id="215">L
</label>
</td>
<td id="schname">
</td>
</tr>
<tr >
<td>
<label for="220">
<input type="checkbox" name="vms" value="220" id="220">M
</label>
</td>
<td id="schname">
</td>
</tr>
<tr >
<td>
<label for="214">
<input type="checkbox" name="vms" value="214" id="214">N
</label>
</td>
<td id="schname">
</td>
</tr>
</tbody>
</table>EDIT: Now the checked ones remain on top and the unchecked one returns into alphabetical order.