问如何使用jquery通过单击复选框来对项目列表进行排序？

EN

jQuery.fn.reverse = [].reverse;

var sl = $('.storesList')

sl.children().reverse().each(function(i) {
  $(this).data({
    original: i + 1,
    rating: +$(".rating", this).text().replace(/[^\d\.]/g, ""),
     minimumorder: +$(".minorder", this).text().replace(/[^\d\.]/g, ""),
    open: $(".open-or-close-tag", this).text() === "CLOSE" ? -1 : 1
  })
})

var slByOrderAmount = $.makeArray(sl.children().map(function(index, el){
  return $(el).data("minimumorder");
})).sort(function(a, b){return a - b}).reverse();

//console.log(slByOrderAmount);

$('#count').text($('.storesList  .store-block:visible').length);
$(".checkboxes-area").change(function() {
  var byRate = $("#by-rate").prop("checked");
  var isOpen = $("#stores-open-now").prop("checked");
  var byminOrder = $("#by-minimum-order").prop("checked");
  //console.log("ByRate = " + byRate + ", ByMinOrder = " + byminOrder + ", IsOpen = " + isOpen);
  sl.children().each(function(){
    var $this = $(this);
    //console.log("Name: " + $this.find(".store-name").html() + ", Original: " + $this.data("original") + ", Rating: " + $this.data("rating") + ", MinOrder: " + $this.data("minimumorder") + ", Open: " + $this.data("open") + ", Result: " + key(this));
  });
  var s = sl.children().get().sort(function(a, b) {
    var aSort = key(a),
        bSort = key(b)
    return aSort < bSort ? 1 : aSort === bSort ? 0 : -1
  });
  $(sl).append(s);


  function key(el) {
   var $el = $(el);
    var res = 1;
    if (byRate == true) res = $el.data("rating");
    if (byminOrder == true) res = slByOrderAmount.indexOf($el.data("minimumorder"));
    if (isOpen == true) res *= $el.data("open");
    res += $el.data("original") * 0.00001;
    return res;
  }
})

.storesList {
  margin-top: 20px;
}

#count {
  display: inline-block;
}

.store-block {
  width: 80%;
  margin-bottom: 10px;
  padding: 5px;
  background: #e5e5e5;
  position: relative;
  overflow: hidden;
}

.rating {
  position: absolute;
  right: 70px;
  top: 3px;
}

.minorder {
  position: absolute;
  right: 180px;
  top: 3px;  
}

.open-or-close-tag {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 11px;
  font-weight: bold;
  color: blue;
}

.right {
  float: right;
}

.left {
  float: left;
}

.hide-me {
  display: none;
}

.checkbox-lab {
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="checkboxes-area">
  <label class="checkbox-lab"><span>OPEN FIRST</span>
 <input type="checkbox" id="stores-open-now">
</label>


<label class="checkbox-lab"><span>BEST RATED</span>
<input type="checkbox" id="by-rate">
</label>

<label class="checkbox-lab"><span>BY MINIMUM ORDER</span>
<input type="checkbox" id="by-minimum-order">
</label>



</div>


<div class="storesList">

  <div class="store-block">
    <div class="store-name">Apple Store</div>
    <div class="rating">&bigstar; 4.5</div>
    <div class="minorder">100 €</div>
    <div class="open-or-close-tag">CLOSE</div>
  </div>

  <div class="store-block">
    <div class="store-name">Nokia Store</div>
    <div class="rating">&bigstar; 3.8</div>
    <div class="minorder">250 €</div>
    <div class="open-or-close-tag">OPEN</div>
  </div>

  <div class="store-block">
    <div class="store-name">Samsung Store</div>
    <div class="rating">&bigstar; 4.0</div>
    <div class="minorder">25 €</div>
    <div class="open-or-close-tag">CLOSE</div>
  </div>

  <div class="store-block">
    <div class="store-name">Linux</div>
    <div class="rating">&bigstar; 4.9</div>
    <div class="minorder">50 €</div>
    <div class="open-or-close-tag">OPEN</div>
  </div>



</div>