如何对比选中复选框文本值与li元素并修改对应li样式

Hey there! Let's tweak your code so it dynamically highlights all <li> elements that match the text of checked checkboxes' parent labels. Here's how to get this working properly:

Key Adjustments Needed #

Instead of hardcoding a single text value to match, we'll:

1. Gather text from all labels linked to checked checkboxes
2. Compare each <li> in .usage-product-list against this collection to apply the red color
3. Reset non-matching items' color when checkboxes are unchecked (to keep the UI consistent)

Modified Full Code #

Replace your existing matching block with the updated code below (I've integrated it into the full AJAX success function):

jQuery(function($){ // start ajax
$('#filter input[type="checkbox"]').on('change', function(){
var filter = $('#filter');
/* Stuff to do every time the element is toggled */
$.ajax({
url:filter.attr('action'),
data:filter.serialize(), // form data
type:filter.attr('method'), // POST
beforeSend:function(xhr){
filter.find('button').css('opacity', '1').text('Загрузка...'); // changing the button label
},
success:function(data){
filter.find('button').css('opacity', '0'); // reset button state
if($(".checkbox:checked").length == 0) {
$('#response').empty();
// Reset all list item colors when no checkboxes are selected
$(".usage-product-list li").css('color', '');
} else {
$('#response').html(data);

// Step 1: Collect text from all checked checkboxes' parent labels (trim whitespace)
const selectedLabelTexts = $(".checkbox:checked").map(function() {
  return $(this).closest('label').text().trim();
}).get();

// Step 2: Highlight matching list items
$(".usage-product-list li").each(function () {
  const currentLiText = $(this).text().trim();
  if (selectedLabelTexts.includes(currentLiText)) {
    $(this).css('color', 'red');
  } else {
    // Reset color if the list item doesn't match any selected checkbox
    $(this).css('color', '');
  }
});
};
}
});
return false;
}); //end jquery ajax
// load more toggle start
$('.load-more').toggle(function() {
$(this).html('Меньше параметров <i class="fas fa-angle-up"></i>');
$('.row-wrap').slideDown('slow');
}, function() {
$(this).html('Больше параметров <i class="fas fa-angle-down"></i>');
$('.row-wrap').slideUp('slow');
}); // load more toggle end
$('#filter input[type="checkbox"]').click(function () {
$(this).siblings('span').toggleClass('active');
}); // end of stack
}); // end of stack

How the Updated Logic Works #

• $(".checkbox:checked").map(...): This loops through every checked checkbox, finds its parent <label>, grabs the text (using trim() to remove extra spaces/newlines), and turns the result into a simple array of strings.
• selectedLabelTexts.includes(currentLiText): Checks if the current <li>'s text is in our array of selected label texts. If it matches, we set the color to red; if not, we reset it to the default.
• Empty selection cleanup: When no checkboxes are checked, we clear the response area and reset all <li> colors to their original state.

Why This Is Better #

• Dynamic matching: No more hardcoding specific text values—any checked checkbox's label will automatically trigger the highlight.
• Whitespace handling: trim() prevents mismatches caused by accidental spaces in labels or list items.
• Consistent UI: Reseting colors when checkboxes are unchecked ensures the interface doesn't leave stale highlights.

内容的提问来源于stack exchange，提问作者yuda