如果在 Woocommerce 中未选中复选框，则隐藏元素答案

【问题标题】：Hide element if checkbox is not checked in Woocommerce如果在 Woocommerce 中未选中复选框，则隐藏元素
【发布时间】：2021-11-12 12:01:22
【问题描述】：

如果选中某个复选框，我正在使用 JavaScrip 显示/隐藏某个元素。就我而言，如果未选中“货运代理”复选框，我想隐藏押金支付选项。

我在我的子主题中添加了 deposit.js，并通过在 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');

我检查了开发者工具，脚本加载成功。

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

我使用了两种方法：

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

和

$(".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);
    }
});

到目前为止，我还没有使用这些代码达到预期的效果。

可能是什么问题？

链接到商店页面（测试站点）-https://siakurjers.wpengine.com/shop/

要检查功能，请将产品添加到购物车并访问结帐页面。

FIDDLE

【问题讨论】：

标签： javascript php jquery wordpress woocommerce

【解决方案1】：

如您所见，在How to show/hide an element on checkbox checked/unchecked states using jQuery? 中$(".ItemName"). 然后分配参数“隐藏”。

尝试为 Tr 项目添加名称，然后尝试。如果你可以用 JSfiddle 或直接在问题中显示一些代码会更好。

【讨论】：

我添加了一个 JSfiddle 链接。顺便说一句，这两个元素是由 3rd 方插件实现的。元素从页面源复制并粘贴到 JSfiddle。

【解决方案2】：

这两个组件（复选框和存款选项）由 3rd 方插件实现。

我不确定为什么问题中的 JS 没有解决问题。

基于Calculate fee from cart totals (subtotal + shipping) without adding it to order total value in Woocommerce，我使用了一个带有jQuery 的PHP 函数。它被插入到functions.php文件中。

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

【讨论】：