简体   繁体   中英

how to compare checkbox checked string value with li element to edit last one

How can I compare checkbox checked string value with li element to edit last one. For example.

 jQuery(function($){

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

                        /* Stuff to do every *odd* time the element is clicked */
        $.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');; // changing the button label back
                if($(".checkbox:checked").length == 0) {
                                $('#response').empty(); 
                          } else {
                                $('#response').html(data); 
                                
                                 };
                                 
                                 $(".usage-product-list li").each(function () {
                                        if ($(this).text() == 'Усиление иммунитета') {
                                            $(this).css('color', 'red');
                                        }
                                    });


                                }
                    });
        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

In my code I have to change the color of li if it contains a text which I put into the string, but how to change every li color with text string equal to each checked checkbox parent LABEL string value?

 $(".usage-product-list li").each(function () {
                                            if ($(this).text() == 'Усиление иммунитета') {
                                                $(this).css('color', 'red');
                                            }
                                        });

  <label><span></span><input class="checkbox" type="checkbox" name="usage_uluchpoedaemost"/>Улучшение поедаемости</label>
                    <label><span></span><input class="checkbox" type="checkbox" name="usage_usilimmun"/>Усиление иммунитета</label>

Just add this to your success function instead of the $(".usage-product-list li").each(function () {}); :

let checked = $("input[type='checkbox']:checked")
checked.each(function() {
   let labelText = $(this).closest("label").text();
    $(".usage-product-list li").each(function() {
       if ($(this).text() == labelText) {
          $(this).css('color', 'red');
       }
    });
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM