CODEWITHSUNDEEP
javascripthtmljquery
user3386779
user3386779

Reputation: 7175

Push the checked item at the top of the list

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>

Upvotes: 2

Views: 338

Answers (3)

Martin Klestil
Martin Klestil

Reputation: 584

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>

Upvotes: 0

Cypherjac
Cypherjac

Reputation: 879

$(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

Upvotes: 3

Balastrong
Balastrong

Reputation: 4464

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>

Upvotes: 2

Related Questions