Push the checked item at the top of the list

user_3386779 0
Viewed 178

I have a checkbox with dynamic list item.I want to push the checked item at the top of the list in onload the list.

I have tried as in below snippet.I tried to change the color of the checked item.color get changed but not pushed the item to top of the list.

$(document).ready(function(){
$("input[name='geo[]']").each(function(){
if ($(this).is(":checked")){
     
      $(this).prop("checked",true);
    $(this).parent('li').css('background-color','#3875D7');
     $(this).parent('li').prepend($(this));
    
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="checklist">
<li tabindex="0" class="even" ><input type="checkbox" value="US_East" name="geo[]" id="geo_US_East" ><label for="geo_US_East" class="leaveRoomForCheckbox">US East</label></li>
<li tabindex="0" class="odd" ><input type="checkbox" value="US_West" name="geo[]" id="geo_US_West" ><label for="geo_US_West" class="leaveRoomForCheckbox">US West</label></li>
<li tabindex="0" class="even checked" ><input type="checkbox" value="NSU" name="geo[]" id="geo_NSU" checked="checked"><label for="geo_NSU" class="leaveRoomForCheckbox">NSU</label></li>
</ul>

html jquery javascript
3 Answers

$(document).ready(function(){
$("input[name='geo[]']").each(function(){
    if ($(this).is(":checked")){
        $(this).prop("checked",true);
        $(this).parent('li').css('background-color','#3875D7');
        $(this).parents('ul').prepend($(this).parent('li'));
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="checklist">
<li tabindex="0" class="even" ><input type="checkbox" value="US_East" name="geo[]" id="geo_US_East" ><label for="geo_US_East" class="leaveRoomForCheckbox">US East</label></li>
<li tabindex="0" class="odd" ><input type="checkbox" value="US_West" name="geo[]" id="geo_US_West" ><label for="geo_US_West" class="leaveRoomForCheckbox">US West</label></li>
<li tabindex="0" class="even checked" ><input type="checkbox" value="NSU" name="geo[]" id="geo_NSU" checked="checked"><label for="geo_NSU" class="leaveRoomForCheckbox">NSU</label></li>
</ul>

This is the only code that has changed:

$(this).parents('ul').prepend($(this).parent('li'))

The parents() selector gets all parents, not just the adjacent parent. Then prepend the parent of the current input item which is the whole li, that will be added at the beginning of the ul list

user_131170700

You could reach the ul tag as the parent of your li first, then prepend the list item li to the ul list.

$(document).ready(function() {
  $("input[name='geo[]']").each(function() {
    if ($(this).is(":checked")) {
      $(this).parent('li').css('background-color', '#3875D7');
      let item = $(this).parent('li');
      let list = $(item).parent('ul');
      $(list).prepend(item);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="checklist">
  <li tabindex="0" class="even"><input type="checkbox" value="US_East" name="geo[]" id="geo_US_East"><label for="geo_US_East" class="leaveRoomForCheckbox">US East</label></li>
  <li tabindex="0" class="odd"><input type="checkbox" value="US_West" name="geo[]" id="geo_US_West"><label for="geo_US_West" class="leaveRoomForCheckbox">US West</label></li>
  <li tabindex="0" class="even checked"><input type="checkbox" value="NSU" name="geo[]" id="geo_NSU" checked="checked"><label for="geo_NSU" class="leaveRoomForCheckbox">NSU</label></li>
</ul>

user_63035410

Hello I hope this helps you further, just implemented the list, not the color you want.

Edit: Add Color

var list = $("ul");
var unorderedList= list.children();

list.on("click", ":checkbox", function() {
    var i = document.createDocumentFragment();
    var checked = document.createDocumentFragment();
    var unchecked = document.createDocumentFragment();
    
    for (i = 0; i < unorderedList.length; i++) {
        if (unorderedList[i].getElementsByTagName("input")[0].checked) {
            checked.appendChild(unorderedList[i]);
            unorderedList[i].style.backgroundColor ="red";
        } else {
            unchecked.appendChild(unorderedList[i]);
            unorderedList[i].style.backgroundColor ="white";
        }
    }
    list.append(checked).append(unchecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="checklist">
<li><label for="geo_US_East" class="leaveRoomForCheckbox"><input type="checkbox" value="US_East" name="geo[]" id="geo_US_East" >US East</label></li>
<li><label for="geo_US_West" class="leaveRoomForCheckbox"><input type="checkbox" value="US_West" name="geo[]" id="geo_US_West" >US West</label></li>
<li><label for="geo_NSU" class="leaveRoomForCheckbox"><input type="checkbox" value="NSU" name="geo[]" id="geo_NSU">NSU</label></li>
</ul>

user_91951390
Related