Displaying rows in a table first with checked checkbox

I have table displayed with checkboxes in each row like this- Table

Html code : -

<table>
     <tr>
        <td><input type= "checkbox"></td>
        <td>Name1</td>
        <td>Role1</td>
     </tr>
     <tr>
        <td><input type= "checkbox"></td>
        <td>Name2</td>
        <td>Role2</td>
     </tr>

     <tr>
        <td><input type= "checkbox"></td>
        <td>Name4</td>
        <td>Role4</td>
     </tr>
     <tr>
        <td><input type= "checkbox"></td>
        <td>Name3</td>
        <td>Role3</td>
     </tr>
</table>

I also have a button 'Sort'. When I click on the button sort, all those rows which have checkboxes as checked should be displayed first and all other rows after them. The result would look something like this -

Result table

How can this be implemented?