基於單選按鈕選擇的woocommerce結帳條件字段

Question

在我的wordpress網站中，我需要在woocommerce結帳頁面中添加一些條件字段。

我已經創建了2個字段，現在我需要根據另一個字段的選擇顯示一個字段。

字段名稱（父字段）： billing_checkbox_cf
字段二的名稱： billing_cf_in

基於“ WooCommerce條件自定義結帳字段 ”回答線程，這是我的代碼：

add_action( 'woocommerce_after_checkout_form', 'cbi_cf_conditionally_hide_show', 6);
function cbi_cf_conditionally_hide_show() {
    // if ( ICL_LANGUAGE_CODE !='it' ) return; // Only for Italy
    $required = esc_attr__( 'required', 'woocommerce' );
    ?>
    <script type="text/javascript">
        (function($){
            var required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>'; // Required html

            $('#billing_cf_in_field').hide();

            $('input#billing_checkbox_cf').change(function(){
                if (this.checked) {
                    $('#billing_cf_in_field').fadeIn("fast", function(){
                        $(this).addClass("validate-required");
                        $('#billing_cf_in_field > label').append(required);
                    });
                } else {
                    $('#billing_cf_in_field').fadeOut("fast", function(){
                        $(this).removeClass("validate-required");
                        $('#billing_cf_in_field > label > .required').remove();
                    });
                }
                $('#billing_cf_in_field').val('');
                $('#billing_cf_in_field').removeClass("woocommerce-validated");
                $('#billing_cf_in_field').removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            });
        })(jQuery);
    </script>
    <?php
}

到目前為止，如果Field1“ billing_checkbox_cf”是一個復選框，我就能使其工作。 選中Field1后，我可以顯示Field2。

我想讓Field1用作單選按鈕（option1 | option2 | option3），並使Field2僅在用戶選擇為option2時顯示。

但是我不是程序員，所以我無法處理單選按鈕的情況。 如何修改我的代碼以使其正常工作？

Answer 1

我設法使它起作用。 我在這里發布是為了對其他人有用

add_action( 'woocommerce_after_checkout_form', 'cbi_cf_conditionally_hide_show', 6);
function cbi_cf_conditionally_hide_show() {
    // if ( ICL_LANGUAGE_CODE !='it' ) return; // Only for Italy
    $required = esc_attr__( 'required', 'woocommerce' );
    ?>
    <script type="text/javascript">
        (function($){
            var required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>'; // Required html

            $('#billing_cf_in_field').hide();

            $('input[type=radio][name=billing_radiobox_cf]').change(function(){
                if (this.value === 'option2') {
                    $('#billing_cf_in_field').fadeIn("fast", function(){
                        $(this).addClass("validate-required");
                        $('#billing_cf_in_field > label').append(required);
                    });
                } else {
                    $('#billing_cf_in_field').fadeOut("fast", function(){
                        $(this).removeClass("validate-required");
                        $('#billing_cf_in_field > label > .required').remove();
                    });
                }
                $('#billing_cf_in_field').val('');
                $('#billing_cf_in_field').removeClass("woocommerce-validated");
                $('#billing_cf_in_field').removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            });
        })(jQuery);
    </script>
    <?php
}

不幸的是，驗證沒有完全起作用，因為在發送表單時，如果未填寫billing_cf_in_field，則該字段會正確變為紅色，但錯誤消息在要填寫的字段列表中未提及billing_cf_in_field。 我將為此打開另一個線程。