Chintan Chintan - 2 months ago 27
HTML Question

How auto sort checkbox list in html

In my HTML form default checkbox and other add dynamically but when check checkbox after checkbox order in list shuffled. How to sort this in As-sending order when load page.

HTML Code is Here:

<div class="checkbox-list" style="width: auto; height: 100px; overflow-y: scroll;">
<label><div class="checker" id="uniform-ch2"><span><input type="checkbox" id="ch2" name="data[chk_name][]" value="Further Review"></span></div>Further Review</label>
<label><div class="checker" id="uniform-ch3"><span><input type="checkbox" id="ch3" name="data[chk_name][]" value="Hot Doc"></span></div>Hot Doc</label>
<label><div class="checker" id="uniform-ch4"><span><input type="checkbox" id="ch4" name="data[chk_name][]" value="Potential Exhiit"></span></div>Potential Exhibit</label>
<label><div class="checker" id="uniform-ch1"><span class="checked"><input type="checkbox" id="ch1" name="data[chk_name][]" checked="" value="Relevant"></span></div>Relevant</label>
<label><div class="checker" id="uniform-ch5"><span class="checked"><input type="checkbox" id="ch5" name="data[chk_name][]" checked="" value="test"></span></div>test</label>
</div>


JavaScript Code File :

$(".checkbox-list lable").sort(function(a, b) {
return parseInt(a.id) - parseInt(b.id);
}).each(function() {
var elem = $(this);
elem.remove();
$(elem).appendTo(".checkbox-list");
});


Sort Order by id="uniform-ch2" Asc.

Answer Source

You can sort it like this:

<script>
    $(".checkbox-list label").sort(function(a, b) {
       return ($(a).find(".checker").attr("id")) > ($(b).find(".checker").attr("id"));
       }).appendTo(".checkbox-list");
</script>

You had several problems in your script:

  • You mistyped lable in the selector
  • You were comparing the IDs of label, not .checker
  • You were parsing the IDs, so you were getting NaN and, thus, no sorting.
  • Looping through the labels at the end was unnecessary