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

Posted 2023-05-08

【中文标题】如果在 Woocommerce 中未选中复选框，则隐藏元素

【英文标题】：Hide element if checkbox is not checked in 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

【参考方案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 );