Javascript 选择和取消选择单选按钮时切换图元可见性

我已经成功地在单选按钮选择上显示元素，但当我选择组中的任何其他单选按钮时，元素保持可见。我错过了什么

element.style.display=“none”

是用普通JavaScript隐藏元素的惯用方法吗

函数showApples（）{
const form=document.querySelector（“表单”）；
const apples=form.elements[“apples”]；
const appleCultivars=form.querySelector（“字段集：第n个类型（2）”）；
apples.addEventListener（“单击”，显示苹果）；
如果（苹果，选中）{
appleCultivars.style.display=“”；
}否则{
appleCultivars.style.display=“无”；
}
}

水果
苹果
橘子
香蕉
苹果
布雷本
马孔
科特兰

请查看以下内容：

const fruits=Array.from（document.getElementsByName（'fruits'）；
const fields=Array.from（document.getElementsByTagName（'fieldset'）；
字段[1]。style.display='none'；
水果。forEach（水果=>{
fruit.addEventListener（'click'，（）=>{
如果（fruit.value=='apples'）{
字段[1]。style.display='block'；
}否则{
字段[1].style.setProperty（'display'，'none'）；//或字段[1].style.display='none'；
}
});
});

水果
苹果
橘子
香蕉
苹果
布雷本
马孔
科特兰
请查看以下内容：


const fruits=Array.from（document.getElementsByName（'fruits'）；
const fields=Array.from（document.getElementsByTagName（'fieldset'）；
字段[1]。style.display='none'；
水果。forEach（水果=>{
fruit.addEventListener（'click'，（）=>{
如果（fruit.value=='apples'）{
字段[1]。style.display='block'；
}否则{
字段[1].style.setProperty（'display'，'none'）；//或字段[1].style.display='none'；
}
});
});

水果
苹果
橘子
香蕉
苹果
布雷本
马孔
科特兰
先将它们全部隐藏起来

此代码是通用的


//在您自己的页面中取消对窗口加载事件侦听器的注释
//addEventListener（“加载”，函数（e）{
document.getElementById（“水果”）.addEventListener（“单击”，函数（e）{
var fruits=this.queryselectoral（“[name=fruits]”）；
对于（变量i=0；i
。水果{
显示：无
}
.表演{
显示：块
}

水果
苹果
橘子
香蕉
苹果
布雷本
马孔
科特兰
橘子
普通的
血橙
肚脐
香蕉
卡文迪什
车前草
先将它们全部隐藏起来

此代码是通用的


//在您自己的页面中取消对窗口加载事件侦听器的注释
//addEventListener（“加载”，函数（e）{
document.getElementById（“水果”）.addEventListener（“单击”，函数（e）{
var fruits=this.queryselectoral（“[name=fruits]”）；
对于（变量i=0；i
。水果{
显示：无
}
.表演{
显示：块
}

水果
苹果
橘子
香蕉
苹果
布雷本
马孔
科特兰
橘子
普通的
血橙
肚脐
香蕉
卡文迪什
车前草
我想您的问题之一是该函数从未被调用。你只从函数中调用函数我忘了调用它。我更新了代码片段。谢谢。我想你们其中的一个问题是这个函数从未被调用过。你只从函数中调用函数我忘了调用它。我更新了代码片段。谢谢。为什么不将其设置为通用型，这样橘子或香蕉在被选中时会显示？胖箭头在IES中不起作用？为什么不将其设置为通用型，这样橘子或香蕉在被选中时会显示？胖箭头在IES中不起作用？您的代码段在运行时会生成错误。@Boletrone我现在无法再现错误，我已注释掉了窗口加载事件侦听器。代码段可能会发生冲突，因为它还运行加载事件处理程序。使用加载事件处理程序activeYou’s code snippet在运行时生成错误。@Boletrone我现在根本无法再现错误，我已在窗口加载事件侦听器中注释掉了该错误。代码段可能会发生冲突，因为它还运行加载事件处理程序。尝试在页面中激活加载事件处理程序