用于在HTML中显示/隐藏URL的Javascript函数

我有大约30个服务器1的URL和30个服务器2的URL。我想要一个java脚本通用函数来根据复选框选择隐藏和显示URL

例如： 复选框1 URL1（默认隐藏）URL2（默认可见）[如果选中复选框，则仅显示URL1和隐藏URL2，反之亦然]

复选框2 URL3（默认隐藏）URL4（默认可见）[如果选中复选框，则仅显示URL3和隐藏URL4，反之亦然]

复选框3 URL5（默认隐藏）URL5（默认可见）[如果选中复选框，则仅显示URL5和隐藏URL6，反之亦然]

我可以选择和取消选择任何复选框。每个复选框应仅处理针对其提及的特定对

我已经写了一个函数，但它只适用于一对URL。我不知道如何确保give复选框与针对它的一组特定URL一起工作

函数切换\u URL（复选框）{
var id2=checkbox.id；
var search_pattern2=/checkbox（.*）$/g；
var number2=搜索模式2.exec（id2）；
number2=number2[1]；
框_id2='框'+数字2；
var box2=document.getElementById（box_id2）；
如果（复选框。选中）{
box2.style.display='inline'；
}否则{
box2.style.display='none'；
}
var id3=checkbox.name；
var search_pattern3=/checkbox（.*）$/g；
var number3=搜索模式3.exec（id3）；
编号3=编号3[1]；
框_id3=‘框’+编号3；
var box3=document.getElementById（box_id3）；
如果（复选框。选中）{
box3.style.display='none'；
}否则{
box3.style.display='inline'；
}
}

切换


切换2

您的解决方案可能工作过度

您有一系列选择，一次只能激活一个选项。您可以使用单选按钮，而不是复选框

您可以使用CSS，而不是使用JavaScript来显示/隐藏

对于单选按钮，您需要确保

名称

字段匹配（将它们绑定到一个组中）——以及每个单选按钮+标签的唯一ID

标签a.link2{display:none；}
输入：选中+标签a.link1{显示：无；}
输入：选中+标签a.link2{显示：内联；}

1组
第2组

doug的css解决方案可能就是您想要的解决方案。但是如果你想用js来做，那么这是一个更优雅的例子

您可以使用

addEventListener

附加事件。可以使用this关键字获取当前单击的元素

document.querySelectorAll（'.urlToggler'）.forEach（（复选框）=>{
复选框.addEventListener（'click'，function（）{
this.parentNode.querySelector（'.firstUrl'）.style.display=this.checked？'inline'：'none'；
this.parentNode.querySelector（'.secondUrl'）.style.display=this.checked？'none'：'inline'；
});
});


切换


切换2

请发布您目前拥有的信息。Html/javascript最好是在代码段中。欢迎使用。请参阅和。@MarkBaijens我试图添加我的代码，但此网站要求缩进，我尝试了缩进，但它不接受。如果您遇到格式问题，请尽最大努力，其他人会解决。编辑问题时，请单击文档图标，其中包含
。您可以在那里创建一个代码段。该代码段中还有一个代码格式化功能。解决方案中的URL不会发生更改，未显示的URL有一个单选按钮。对于group1，如果我选择单选按钮，它应该显示URL1，否则显示URL2，并且不应该有第二个单选按钮。这是每个组的应用程序。更新了，带回了复选框/但现在它进行了交换——仍然没有JS:）这完全有效。。。我为此浪费了一整天。非常感谢。你是个明星谢谢马克这很有魅力。需要修复一个小的语法错误。