WooCommerce: Add class to active payment method and keep it

Question

I want to add the class is-checked to the <li> of the current selected payment method.

The solution I came up so far is the following function:

add_filter( 'wp_head', 'add_class_to_active_payment' );
function add_class_to_active_payment() { ?>

    <script>
        jQuery(function ($) {
            $(".wc_payment_method :radio").click(function() {
                $(".wc_payment_method").each(function() {
                    $(this).toggleClass("is-checked", $(this).find(":radio:checked").length > 0);
                });
            });
        });
    </script>

<?php }

I see the added class for a second. Then the payment methods load again and the class is gone.

I guess it has something to do with the priority of my script. It should fire after the ajax in the payment form is ready?!

I found the following line:

jQuery(document).ajaxComplete(function () {

But if I change it with my first line, the script doesn't work anymore:

jQuery(function ($) {

Answer 1

Been wanting to do the same thing, and while figuring it out I came through your post, and now I've manage to solve it and thought I share.

No need for anything in the funciton.php, I'm just using this jQuery, works like a charm...although might be a "more correct" way to do it.

$('body').on( 'updated_checkout', function() {  // lets do this everytime the ajax event update_checkout goes off, which is also does when the checkout loads on inital page load and/or refreash

    var $input = $('.wc_payment_method input');   // caching our input 

    $input.filter(':checked').parent().addClass("is-checked");  // filtering out the checked one and adding .is-active to the parten li on inital page load/refresh

    $input.on('change', function () { // removing and adding our .is-active whnever there is a change
        $input.parent().removeClass('is-checked');
        $(this).parent().addClass('is-checked');
    });     

});