自定义复选框在 Woocommerce 结帐中显示或隐藏自定义通知

Question

我是这方面编码的新手，我现在研究了很多网站，并尝试在 Woocommerce 中建立自己的结帐字段。它应该是一个结帐字段，当它被选中时，应该会弹出一些信息或警告，它可以正常显示在结帐页面上，但我的脚本不起作用。

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_fields' );

function add_custom_checkout_fields( $fields ) {

    $fields['billing']['checkbox_trigger'] = array(

        'type'      => 'checkbox',

        'label'     => __('You dont live in Germany?', 'woocommerce'),

        'class'     => array('form-row-wide'),

        'clear'     => true

    );

    return $fields;

}

add_action( 'woocommerce_after_checkout_billing_form', 'echo_notice_billing' );

function echo_notice_billing() {

    echo '<div class="billing-notice woocommerce-info" style="display:none">It may take forever</div>';

}

add_action( 'woocommerce_after_checkout_form', 'show_notice_billing' );

function show_notice_billing(){ 

    ?>

        <script>

        jQuery(document).ready(function($){

            $('checkbox_trigger').change(function(){

                if(this.checked){

                    $('billing-notice').show();

                }

                else {

                    $('billing-notice').hide();

                }

            });

        });

    </script>

    <?php

}

Answer 1

您的 jQuery 脚本中存在一些错误……尝试将您的相关函数替换为：add_action( 'woocommerce_after_checkout_form', 'show_notice_billing' );function show_notice_billing(){&nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; jQuery(function($){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#checkbox_trigger').click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if($(this).is(':checked') ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.billing-notice').show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.billing-notice').hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script>&nbsp; &nbsp; <?php}测试和工作。