Javascript 如果在一堆唯一的复选框中选中了一个特定的复选框，如何显示特定的文本

我有一个具体的任务要做，我不知道什么是最好的方式去做

我有大约60个独特的复选框，单击时，在其右侧显示一些文本（与单击的复选框关联）

我已经用64个特定的

eventListeners

完成了这项工作，但我不确定这是否是最好的方法：我想简化代码

例如，我在标签中有一堆复选框：

test

，

test1

，

test2

等等。当我点击

test

复选框时，文本“hello world”会出现，如果选中了

test1

，文本“1-2-3”会出现，如果选中了

test2

，文本“我已经完成了”会出现，但如果没有选中任何一个，文本将不会显示

这是代码，我现在有一个事件侦听器：

var forSale = document.querySelector('#for_sale');
var forSaleEmail = document.querySelector('#for_sale_email');
/*For Sale*/
forSale.addEventListener("click", function(){
    if(forSale.checked === true){
        forSaleEmail.style.display = 'block';
    } else {
        forSaleEmail.style.display = 'none';
    }
});

其中，

forSale

变量是一个复选框，

forSaleEmail

是一个应该显示的文本

如果您有任何建议，或者您可以告诉我要寻找什么，我们将不胜感激

HTML代码如下所示：

<div><label>For Sale <input type="checkbox" id="for_sale"></label></div>
<div><span id="for_sale_email">
<p>
for sale
</p>
</span></div>

出售

供出售

您的代码很好，但您应该明确地将其抽象为一个函数：

function selectMessage(checkbockSelector, messageSelector) {
   var checkbox = document.querySelector(checkboxSelector);
   var message = document.querySelector(messageSelector);

   checkbox.addEventListener("click", function(){
      message.style.display = checkbox.selected ?  'block' : 'none';
   });
}

这样你就可以：

selectMessage("#for_sale", "#for_sale_email");

---

如果有很多元素，最好将HTML更改为一个结构，使标签与输入直接相关：

<div id="sale">
  <label>For Sale</label>
  <input type="checkbox" id="for_sale" class="withhint">
  <span class="hint">
    <p>for sale</p>
  </span>   
</div>

并使用javascript将处理程序应用于所有：

document.querySelectorAll(".withhint").forEach(function(input) {
  const hint = input.parentElement.querySelector(".hint");
  input.addEventListener("click", function() {
     hint.style.display = input.checked ? "block" : "none";
  });
});

---

一个选项是事件委派，您可以向所有

输入的父/祖先添加一个事件处理程序，并使用事件属性
event.target
检测单击的事件，只需在其父
div上切换类即可

再加上
+
，它就这么简单了

注1：像
这样的内联元素中包含
是无效的标记，因此我删除了它。如果您需要一个额外的，请使用另一个
，并为其提供与
默认样式类似的样式

注2：
id
必须是唯一的，因此请确保您已处理好它，而对于您的
待售电子邮件
则不需要，因此我将其更改为类

注3：如果您想在所选的
输入
之间进行“切换”，我还添加了一个代码部分

堆栈片段


document.querySelector（'.inputs\u parent'）.addEventListener（'change'，函数（事件）{
//这将“隐藏”以前选中的输入
var prev=此.querySelector（'div.checked'）；
如果（上一个）{
prev.classList.remove（'checked'）；
prev.querySelector（'input'）。checked=false；
}
//如果不使用上述语句，请删除此“if”语句
如果（！prev | |！prev.contains（event.target））
event.target.closest（'div'）.classList.toggle（'checked'）；
})
。待售电子邮件{
显示：无；
}
div.checked+div.for\u sale\u电子邮件{
显示：内联块；
}

供出售
供出售
供出售
供出售
供出售
供出售
供出售
供出售
你能发布HTML的一部分吗？当然：待售这是待售的
也许可以在问题中添加你的HTML代码：）更多的HTML，而不仅仅是一个抱歉，是错误添加的，都在第一个问题中：）。因此，我有大约64个独特的复选框和64个独特的文本。如何在更高的范围内实现这一点？正如我所见，这是完美的，没有那么复杂：）@goran又加了一句话哈哈，我是个白痴。忘记添加标签和span标签应分开。我编辑我的问题是为了向你展示。非常感谢。问题是它们必须在两个特定的s@GoranSovilj然后请将其编辑到您的问题中，这样我们就可以看到它应该是什么样子，我将能够调整我的答案，就好像您可以避免您所遇到的所有问题一样should@GoranSovilj我将添加一个脚本示例到，使用1事件listener@GoranSovilj由于您的更新代码示例无法使用CSS，因此我删除了该部分，并使用您的更新代码更新了脚本示例code@GoranSovilj再次更新，仅使用CSS添加了2个版本（如果可能对标记进行微小更改）
document.querySelectorAll(".withhint").forEach(function(input) {
  const hint = input.parentElement.querySelector(".hint");
  input.addEventListener("click", function() {
     hint.style.display = input.checked ? "block" : "none";
  });
});