Javascript 基于收音机选择的显示字段

我正在一个Woocommerce网站上工作，我的客户希望它这样，如果选择了“每月”单选按钮，那么.wapf包装器将出现

我尝试了多种解决方案，但都不起作用。这是我目前正在使用的代码：

$（文档）.ready（函数（）{
$（'input[name=“convert_to_sub_36”]：radio'）。单击（函数（）{
var inputValue=$（此）.attr（“1个月”）；
变量targetBox=$（“+inputValue）；
$（“.wapf输入”）.not（targetBox.hide（）；
$（targetBox.show（）；
});
});
.wapf包装器{
显示：无；
}

选择购买计划：


一次


每月


机构
救生桥
贝弗利引导
您可以使用
切换
并向其传递一个布尔值（真/假）以显示/隐藏

单行：
$（.wapf包装器”）.toggle（$（this.val（）=“1个月”）

我还将click事件更改为change，因为这是收音机/复选框的适当事件


$（文档）.ready（函数（）{
$（document）.on（“change”，“input[name=“convert_to_sub_36”]”，function（）{
$（“.wapf包装器”）.toggle（$（this.val（）=“1个月”）；
/*
var inputValue=$（此）.attr（“1个月”）；
变量targetBox=$（“+inputValue）；
$（“.wapf输入”）.not（targetBox.hide（）；
$（targetBox.show（）*/
});
});
.wapf包装器{
显示：无；
}

选择购买计划：


一次


每月


机构
救生桥
贝弗利引导
使用香草JS（将其添加到JS文件的末尾）：

document.addEventListener（“DOMContentLoaded”，（）=>{
const wapf=document.querySelector（“.wapf包装器”）；
document.addEventListener（“单击”，（e）=>{
if（e.target&&e.target.name==“转换为子对象36”）{
wapf.style.display=e.target.value==“1个月”？“块”：“无”；
}
});
});

您可以在此处看到它的作用-
我已经添加了您的代码，如果您选择捐赠金额，然后选择“每月”，则该代码在暂存站点上似乎不起作用。wapf包装没有出现。@FeliciaSantos我更新了我的答案，以授权处理无线电，它现在应该可以工作了。我在临时站点上测试了它，但它没有工作。这是登台站点：rootfends.wpnengine.com/product/fends-generation，如果您选择捐赠金额，然后选择“每月”，则.wapf包装不会出现。您确定代码已在登台网站上执行吗？我在Chrome开发工具的Sources选项卡中没有看到我的代码。您在其中添加代码的文件名是什么？在哪个文件夹中？实际上，我从另一个答案中看到了代码，它不起作用，但我在那里没有看到我的代码。也许你忘了点击save或者类似的东西？很抱歉，我临时删除了它以测试其他答案代码。我已将您的代码添加回站点。我看到了潜在的问题。加载页面时，“一次性”和“每月”单选按钮不会立即显示。让我在几分钟后更新我的解决方案：）尝试使用
$（document）.ajaxComplete
而不是
.ready
，因为
.wapf输入直到做出选择后才添加。