HTML list sorting filter

Alex Lord
Alex Lord used Ask the Experts™
Any Recommendations on where to look to re order a list based on input, i have a list that has switches and what i am trying to do is some filtering to display checked switches

$("#check-sort-list").on('change', function() {
       var get_selected = $(this).val();
        if(get_selected == 1)
        else if(get_selected == 2)
        else if(get_selected == 3)
            } else 
                {console.log("No selection");}

Open in new window

my list is just a normal html list with a label and a checkbox.
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Please show us the list and what you are wanting to use to sort it.

I am assuming <ul> ?

This is confusing. Name suggests checkbox - usage suggests dropdown
$("#check-sort-list").on('change', function() {
       var get_selected = $(this).val();

Open in new window

The rest of the code says nothing about what you want to do re sorting - what criteria do you use to sort
- Free form entry
- Checkbox / drop down selection

What in the list is used as the sorting field?
Top Expert 2014
Test page :

<!DOCTYPE html>
    <script src=""></script>
        jQuery(function($) {
            var arrClass = { 1: "one", 2: "two", 3: "three"};
            var sortList = function() {
                $("#mylist li").hide();
                $(".check-sort-list:checked").each(function() {
                    var checkboxValue = $(this).val();
                    var classToDisplay = arrClass[ checkboxValue ];
                    $("#mylist li." + classToDisplay).show();
            $(".check-sort-list").on('change', sortList);
<input type="checkbox" class="check-sort-list" value="1" checked="checked">1<br>
<input type="checkbox" class="check-sort-list" value="2">2<br>
<input type="checkbox" class="check-sort-list" value="3">3<br>
<ul id="mylist">
    <li class="one">my number(s) : 1</li>
    <li class="one two">my number(s) : 1 2</li>
    <li class="one three">my number(s) : 1 3</li>
    <li class="two">my number(s) : 2</li>
    <li class="three">my number(s) : 3</li>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial