Set list item color based upon what radio button selected jquery

Question

I have a group of unordered lists items. Each list item has a data attribute with one of the following values: all deleted active inactive

I also have four radio button with the following values all deleted active inactive

What I am stuck with is setting all the list items of the selected radio button to the same color. So for deleted I set them to "red", for "active" I set them to "green" and, for "inactive" I set them to "light gray"

$('input[name="test"]').on('change', function() {
  var value = this.value;
  var listValue = $('li').data("status");
  //$('.ul1 >li').hide();
  if (value == 'All') {
    //$('.ul1 >li').show();
    alert('all');
  }
  if (value == 'deleted') {
    $('.ul1 > li').each(function() {
      if (listValue == 'deleted') {
        $('li').css("color", "red")
      }
    });

  }
  if (value == 'active') {
    //$('.ul1 >li').show();
    alert('active');
  }
  if (value == 'inactive') {
    //$('.ul1 >li').show();
    alert('inactive');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="All" checked name="test"><label>All</label>
<input type="radio" value="deleted" name="test"><label>Deleted</label>
<input type="radio" value="active" name="test"><label>Active</label>
<input type="radio" value="inactive" name="test"><label>Inactive</label>

<ul class="ul1">
  <li data-status="deleted">john</li>
  <li data-status="active">mary</li>
  <li data-status="inactive">bob</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">sally</li>
  <li data-status="active">erica</li>
  <li data-status="inactive">jane</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">ted</li>
  <li data-status="active">joan</li>
  <li data-status="inactive">rob</li>
</ul>

So if the deleted radio button was selected then john, sally and, ted would have their text color set to "red"

where am I going wrong

Thanks John

Answer 1

$('li').data("status") will always return the value of the first <li>.

You need to check the value of each one and modify that instance accordingly. I suggest you use classes rather than css() since it is simpler to add/remove a class than unwind inline css changes

$('input[name="test"]').on('change', function() {
  
  var value = this.value;
  
  $('li').each(function(){
     var $li = $(this),
         listValue = $li.data("status"),
         showActive = listValue === value || value === 'All';
         
     $li.toggleClass('active', showActive);  
  });
});

li.active{ color: red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" value="All" name="test">All</label>
<label><input type="radio" value="deleted" name="test">Deleted</label>
<label><input type="radio" value="active" name="test">Active</label>
<label><input type="radio" value="inactive" name="test">Inactive</label>

<ul class="ul1">
  <li data-status="deleted">john</li>
  <li data-status="active">mary</li>
  <li data-status="inactive">bob</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">sally</li>
  <li data-status="active">erica</li>
  <li data-status="inactive">jane</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">ted</li>
  <li data-status="active">joan</li>
  <li data-status="inactive">rob</li>
</ul>

Answer 2

You can simply use data-attr as selector i.e : $(".ul1 li[data-status=" + listValue + "]").addClass(listValue) to add required class where listValue is selected value of radio button.

Demo Code :

$('input[name="test"]').on('change', function() {
  var listValue = this.value;
  //remove class if any of these
  $(".ul1 li[data-status]").removeClass("deleted active inactive")
  $(".ul1 li[data-status=" + listValue + "]").addClass(listValue) //add class
});

.deleted {
  color: red
}

.active {
  color: green
}

.inactive {
  color: gray
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="All" checked name="test"><label>All</label>
<input type="radio" value="deleted" name="test"><label>Deleted</label>
<input type="radio" value="active" name="test"><label>Active</label>
<input type="radio" value="inactive" name="test"><label>Inactive</label>

<ul class="ul1">
  <li data-status="deleted">john</li>
  <li data-status="active">mary</li>
  <li data-status="inactive">bob</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">sally</li>
  <li data-status="active">erica</li>
  <li data-status="inactive">jane</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">ted</li>
  <li data-status="active">joan</li>
  <li data-status="inactive">rob</li>
</ul>

Answer 3

You were trying to solve this by taking them separately as 3 different elements while they were very much similar. The approach is much more dynamic when you see it like this.

1. All the list elements have data-status same as one of the radio button values.
2. All the radio button values corresponds to a css color.
3. Take all the list items and check their status, if it matches the current checked radio button then color it with the selected value color.

$('input[name="test"]').on('change', function() {
  var value = this.value;
  var colors = [];
  colors['deleted']="red";
  colors['active']="green";
  colors['inactive']="lightgrey";

  $('ul > li').each(function() {
      if ($(this).attr('data-status') == value) {
        $(this).css('color', colors[value]);
      } else {
        $(this).css('color', "black");
      }
    });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="All" checked name="test"><label>All</label>
<input type="radio" value="deleted" name="test"><label>Deleted</label>
<input type="radio" value="active" name="test"><label>Active</label>
<input type="radio" value="inactive" name="test"><label>Inactive</label>

<ul class="ul1">
  <li data-status="deleted">john</li>
  <li data-status="active">mary</li>
  <li data-status="inactive">bob</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">sally</li>
  <li data-status="active">erica</li>
  <li data-status="inactive">jane</li>
</ul>
<ul class="ul1">
  <li data-status="deleted">ted</li>
  <li data-status="active">joan</li>
  <li data-status="inactive">rob</li>
</ul>