CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RP12
RP12

Reputation: 428

Move list elements to the top after being checked

I have an unordered list with a series of li elements. Currently my code animates my li elements as they are clicked and change positions inside the ul.

I am trying to add some extra functionality depending on whether a li element has its checkbox checked or unchecked.

The behavior I am trying to get is the following:

1) If you check a box, it rises to the top of the list

2) if you uncheck it falls back behind the checked items, it does not matter whether it goes to to bottom or returns to its old position

Here is the JsFiddle

This is a basic skeleton of what the HTML looks like:

<ul>
   <li class="js-checkbox" id="1"><input type="checkbox">I am list item number 1.</li>
   <li class="js-checkbox" id="2"><input type="checkbox">I am list item number 2.</li>
   <li class="js-checkbox" id="3"><input type="checkbox">I am list item number 3.</li>
   <li class="js-checkbox" id="4"><input type="checkbox">I am list item number 4.</li>
   <li class="js-checkbox" id="5"><input type="checkbox">I am list item number 5.</li>
</ul>

Upvotes: 0

Views: 1020

Answers (2)

mechanicious
mechanicious

Reputation: 1616

$('ul > li > input[type="checkbox"]').on("click", function() {
    var parent = $(this).parent("li");
    if($(this).is(":checked") === true) {
    // move to the top
    $(parent).slideUp(300, function() {
      $(parent).prependTo($(parent).parent());
      $(parent).slideDown(300);
    });
    } else {
      $(parent).slideUp(300, function() {
        $(parent).appendTo($(parent).parent());
        $(parent).slideDown(300);
      });
    }
});
body {
    font-size: 14px;
    font-family: sans-serif;
}

li, ul {
    position: relative;
    top: 0;
    left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li class="js-checkbox" id="1"><input type="checkbox">I am list item number 1.</li>
   <li class="js-checkbox" id="2"><input type="checkbox">I am list item number 2.</li>
   <li class="js-checkbox" id="3"><input type="checkbox">I am list item number 3.</li>
   <li class="js-checkbox" id="4"><input type="checkbox">I am list item number 4.</li>
   <li class="js-checkbox" id="5"><input type="checkbox">I am list item number 5.</li>
</ul>

Upvotes: 2

Ernesto
Ernesto

Reputation: 1592

How about something like this:

$("ul li input").on("change", function() {
  var self = $(this);
  var $li = self.parent();
  debugger;
  if (self.is(":checked")) {
    $li.slideUp(function() {
      $li.insertBefore($li.siblings(':eq(0)')).slideDown();
    });
  }

});
body {
  font-size: 14px;
  font-family: sans-serif;
}

li,
ul {
  position: relative;
  top: 0;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="js-checkbox" id="1">
    <input type="checkbox">I am list item number 1.</li>
  <li class="js-checkbox" id="2">
    <input type="checkbox">I am list item number 2.</li>
  <li class="js-checkbox" id="3">
    <input type="checkbox">I am list item number 3.</li>
  <li class="js-checkbox" id="4">
    <input type="checkbox">I am list item number 4.</li>
  <li class="js-checkbox" id="5">
    <input type="checkbox">I am list item number 5.</li>
</ul>

Credit for the animation goes to this answer https://stackoverflow.com/a/3256799/641530

Upvotes: -1

Related Questions