根据上一个问题的答案显示/隐藏结帐字段答案

【问题标题】：Show/Hide Checkout Fields according to answer to previous question根据上一个问题的答案显示/隐藏结帐字段
【发布时间】：2020-08-06 19:11:36
【问题描述】：

我使用多步结帐插件。

我使用复选框询问客户是否过敏。第一个复选框是 none，然后是 chicken、beef 等。

我希望删除 none 复选框选项并在此之前提出该问题。例如我想问“你有饮食要求吗？”并将 yes 或 no 处理为单选按钮。

我希望默认隐藏复选框过敏选项，并且仅当客户在上述问题中选择是时才显示此问题。非常感谢您的建议。

使用这样的东西是建议还是不好？

$('.dietary_restrictions').click(function() {
    if($(this).is(":checked")) {
        $('.additional_allergies').show();
    } else {
        $('.additional_allergies').hide();
    }
})

此外，我的结帐插件确实支持条件问题，但显示和隐藏问题的选项是一个下拉菜单，允许我仅根据客户或产品显示和隐藏，而不是根据问题或答案。

【问题讨论】：

欢迎来到 SO！您用于显示附加选项的 jQuery 示例看起来不错。这些在任何方面都不是安全风险，所以我认为你可以这样做。也许结帐插件有过滤器/动作挂钩来创建自定义选项？能否提供插件名称？

标签： wordpress forms validation woocommerce checkout

【解决方案1】：

它的 jquery 并且你需要放置在里面并使用 jQuery 而不是 $

<script>
function dietary_restrictions() {
    jQuery('input#dietary_restrictions').click(function() {
        if($(this).is(":checked")) {
            jQuery('input#additional_allergies_field').show();
        } else {
            jQuery('input#additional_allergies_field').hide();
        }
}
</script>

或者只是将它粘贴到 jQuery(document).ready({}) 内的 .js 文件中；

【讨论】：

我不知道为什么，但这不起作用。不过还是谢谢。

【解决方案2】：

我用过这个，效果很好。

<script type="text/javascript">
$('#dietary_restrictions').click(function() {
    if($(this).is(":checked")) {
        $('#additional_allergies_field').show();
    } else {
        $('#additional_allergies_field').hide();
    }
})
</script>

而且我必须将 css 设置为默认隐藏 ID。

【讨论】：