Question

我在WooCommerce上有一个自定义送货方式，只有在选择了自定义送货方式时，才会向用户显示一个包含信息的小方框。

到目前为止，我已尝试过这个小代码：

jQuery(document).ready(function($) {
    $(document).on("change", "#shipping_method_0_my_shipping_method", function() {
        if( $("#shipping_method_0_my_shipping_method").prop('checked') == true ){
            $('.custom-box').show();
        } else {
            $('.custom-box').hide();
        }
    });
});

当选择自定义送货方式时，它会显示.custom-box就好了。但是，当我选择其他运输方式时，它不会因为某种原因而隐藏它吗？

如果我在页面加载时选择了我的自定义送货方式，它也不会显示该框，但如果我点击其他一些送货方式，然后我的自定义送货方式，它将显示该框正常。

现在正常工作。感谢下面的ТомицаКораћ工作解决方案！

Answer 1

试试这个脚本：

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

    // Create reusable function to show or hide .custom-box
    function toggleCustomBox() {
        // Get id of selected input
        var selectedMethod = $('input:checked', '#shipping_method').attr('id');

        // Toggle .custom-box depending on the selected input's id
        // Replace 'shipping_method_0_my_shipping_method' with your desired id
        if (selectedMethod === 'shipping_method_0_my_shipping_method') {
            $('.custom-box').show();
        } else {
            $('.custom-box').hide();
        };
    };

    // Fire our function on page load
    $(document).ready(toggleCustomBox);

    // Fire our function on radio button change
    $('#shipping_method input:radio').change(toggleCustomBox);
});

请告诉我这是否适合您。

修改

我已经更新了脚本。请尝试这个，让我知道它是否有效：

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

    // Create reusable function to show or hide .custom-box
    function toggleCustomBox() {
        // Get id of selected input
        var selectedMethod = $('input:checked', '#shipping_method').attr('id');

        // Toggle .custom-box depending on the selected input's id
        // Replace 'shipping_method_0_my_shipping_method' with your desired id
        if (selectedMethod === 'shipping_method_0_my_shipping_method') {
            $('.custom-box').show();
        } else {
            $('.custom-box').hide();
        };
    };

    // Fire our function on page load
    $(document).ready(toggleCustomBox);

    // Fire our function on radio button change
    $(document).on('change', '#shipping_method input:radio', toggleCustomBox);
});

Woocommerce单选按钮检查jquery

1 个答案:

修改