Hide element if checkbox is not checked in Woocommerce

Question

I am using JavaScrip to show/hide a certain element if a certain checkbox is checked. In my case, if the "Freight forwarding" checkbox is not checked, I would like to hide deposit payment options.

I have added deposit.js in my child theme and enqueued it by adding the following code in functions.php

function load_hide_deposit_script() {
  if( is_page(98) ) {
    //script location - child theme//
    wp_enqueue_script( 'js-file', get_stylesheet_directory_uri() . '/deposit.js');
  }
}

add_action('wp_enqueue_scripts', 'load_hide_deposit_script');

I checked developer tools and the script is loaded successfully.

Based on How to show/hide an element on checkbox checked/unchecked states using jQuery?

I have used two approaches:

function valueChanged()
    {
        if($('.input-checkbox.thwcfe-input-field').is(":checked"))   
            $(".cart-wcdpp-fields.order-total").show();
        else
            $(".cart-wcdpp-fields.order-total").hide();
    }

and

$(".cart-wcdpp-fields.order-total").hide();
$(".input-checkbox.thwcfe-input-field").click(function() {
    if($(this).is(":checked")) {
        $(".cart-wcdpp-fields.order-total").show(300);
    } else {
        $(".cart-wcdpp-fields.order-total").hide(200);
    }
});

So far I haven't achieved desired result with these codes.

What could be the problem?

Link to the shop page (testing site) - https://siakurjers.wpengine.com/shop/

To check the functionality please add a product to the cart and visit the checkout page.

FIDDLE

score 0 · Answer 1 · answered Sep 17 '21 at 16:48

0

As you can see, in How to show/hide an element on checkbox checked/unchecked states using jQuery? the $(".ItemName"). and then assign the parameter "hide".

Try add a name to the Tr item and then try it. It would be better if you can show some code with JSfiddle or directly in the question.

answered Sep 17 '21 at 16:48

NexDanger

43
11

I added a JSfiddle link. By the way, these two elements are implemented by 3rd party plugins. Elements were copied from page source and pasted into JSfiddle. – Rudolfs Sep 18 '21 at 14:35

score 0 · Accepted Answer · answered Sep 30 '21 at 15:17

These two components (checkbox and deposit options) are implemented by 3rd party plugins.

I am not sure why JS in the question did not do the trick.

Based on Calculate fee from cart totals (subtotal + shipping) without adding it to order total value in Woocommerce, I used a PHP function with jQuery. It was inserted in the functions.php file.

// Show/hide deposit options

function action_wp_footer() {
    // Only on checkout
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
    jQuery( function($){
        // Selector
        var my_input = 'input[name=forwarding]';
        var my_deposit = '#my_id_field';
        
        // Show or hide
        function show_or_hide() {
            if ( $( my_input ).is(':checked') ) {
                return $( my_deposit ).show();
            } else {
                return $( my_deposit ).hide();               
            }           
        }
        
        // Default
        $( document ).ajaxComplete(function() {
            show_or_hide();
        });
        
        // On change
        $( 'form.checkout' ).change(function() {
            show_or_hide();
        });
    });
    </script>
    <?php
    endif;
}
add_action( 'wp_footer', 'action_wp_footer', 10, 0 );

Hide element if checkbox is not checked in Woocommerce

2 Answers2