How to move a div to the top of its parent on checkbox check?

How can I make a <div> move to top within a parent <div>, based on a checked checkbox? I.e. if a checkbox of a row is checked, move the row to the top.

$("#player-list input[type=checkbox].oncourt").live('click', function(){
    $(this).parent().prependTo("#player-list")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="player-list">
    <div class="row">
        <div id=1><input type="checkbox" class="oncourt"> ROW 1</div>
    </div>
    <div class="row">
        <div id=2><input type="checkbox" class="oncourt"> ROW 2</div>
    </div>
    <div class="row">
        <div id=3><input type="checkbox" class="oncourt"> ROW 3</div>
    </div>
    <div class="row">
        <div id=4><input type="checkbox" class="oncourt"> ROW 4</div>
    </div>
    <div class="row">
        <div id=5><input type="checkbox" class="oncourt"> ROW 5</div>
    </div>
    <div class="row">
        <div id=6><input type="checkbox" class="oncourt"> ROW 6</div>
    </div>
    <div class="row">
        <div id=7><input type="checkbox" class="oncourt"> ROW 7</div>
    </div>
    <div class="row">
        <div id=8><input type="checkbox" class="oncourt"> ROW 8</div>
    </div>
</div>