Как связать (checked) элемент checkbox и элемент строки li? ЧТобы на выходе строка с текстом равным тексту checkbox можно было изменить

Как сравнить текст поля input checkbox и строки списка li, и изменить в итоге тот li который соответсвует строке input выделенного checkbox?

jQuery(function($){

// start ajax 
    $('#filter input[type="checkbox"]').on('change', function(){
        var filter = $('#filter');


        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // 
            type:filter.attr('method'), // 
            beforeSend:function(xhr){
                filter.find('button').css('opacity', '1').text('Загрузка...'); 
                // 
            },
            success:function(data){
                filter.find('button').css('opacity', '0');; // 
                if($(".checkbox:checked").length == 0) {
                                $('#response').empty(); 
                          } else {
                                $('#response').html(data); 
                          }
                    }
                    });
        return false;
                    });
//end jquery ajax

    });
// end 

$(document).ready(function() {

    $(".checkbox").click(function() {

        var checkBoxes = $(this);

        checkBoxes.attr("checked", !checkBoxes.attr("checked")); // fix checked state

        var li = $(".usage-product-list li");

             if (checkBoxes.attr('checked') == 'checked') {

                 for (let el of li) {

                      if(el.innerText == this.parentElement.innerText) {

             el.style.color = 'red';
                };
                 };
   };
    });                 
});

В итоге элемент списка применяет стиль color - red и сразу же его сбрасывает. Так-же если удаляю условие if (checkBoxes.attr('checked') == 'checked') то результат такой-же, как-будто условие не принимается.

   <label>
<span></span>
<input class="checkbox" type="checkbox" name="imya_checkboxa"/>
Название чекбокса
</label>