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

Question

我有一项特定的任务要做，但我不确定最好的方法是什么。

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

我已经完成了 64 个特定的 eventListeners，但我不确定这是不是最好的方法：我想简化代码。

因此，例如，我在标签中有一堆复选框：test、test1、test2 等等。当我点击test复选框时，会出现文本：“hello world”，如果选中test1，则会出现文本：“一二三”，如果选中test2，文本：“I' 've done it' 可以出现，但如果没有选择，则不会显示文本。

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

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>

Answer 1

一个选项是事件委托，您将 一个 事件处理程序添加到所有 input 的父/祖先，并使用事件属性 event.target 来检测点击，然后简单地在其父类div 上切换一个类。

结合CSS adjacent sibling selector + 就这么简单

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

注意 2：id 需要是唯一的，因此请确保您已经处理好它，而对于您的 for_sale_email，它不需要，所以我将其更改为一个类。 em>

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

堆栈sn-p

document.querySelector('.inputs_parent').addEventListener('change', function(event) {

  // this will "hide" previous checked input
  var prev = this.querySelector('div.checked');
  if (prev) {
      prev.classList.remove('checked');
      prev.querySelector('input').checked = false;
  }


  // remove this "if" statement if won't use the above 
  if (!prev || !prev.contains(event.target))
      event.target.closest('div').classList.toggle('checked');

})

.for_sale_email {
  display: none;
}

div.checked + div .for_sale_email {
  display: inline-block;
}

<div class="inputs_parent">

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

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

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

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

</div>

---

如果您可以对标记进行小幅更改，那么您实际上可以单独使用 CSS 完成此操作。

堆栈sn-p

.inputs_parent label:after {
  content: 'X';
  display: inline-block;
  text-align: center;  
  font-size: 12px;
  color: transparent;
  width: 12px;
  height: 12px;
  border: 1px solid black;
  margin-left: 5px;
}

.inputs_parent input,
.inputs_parent .for_sale_email {
  display: none;
}

.inputs_parent input:checked + div label:after {
  color: black;
}

.inputs_parent input:checked + div + div .for_sale_email {
  display: inline-block;
}

<div class="inputs_parent">

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

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

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

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

</div>

---

这个切换是选中的项目，使用input type="radio"。

堆栈sn-p

.inputs_parent label:after {
  content: 'X';
  display: inline-block;
  text-align: center;  
  font-size: 12px;
  color: transparent;
  width: 12px;
  height: 12px;
  border: 1px solid black;
  margin-left: 5px;
}

.inputs_parent input,
.inputs_parent .for_sale_email {
  display: none;
}

.inputs_parent input:checked + div label:after {
  color: black;
}

.inputs_parent input:checked + div + div .for_sale_email {
  display: inline-block;
}

<div class="inputs_parent">

  <input type="radio" name="radio" id="for_sale1">
  <div>
    <label for="for_sale1">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <input type="radio" name="radio" id="for_sale2">
  <div>
    <label for="for_sale2">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <input type="radio" name="radio" id="for_sale3">
  <div>
    <label for="for_sale3">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

  <input type="radio" name="radio" id="for_sale4">
  <div>
    <label for="for_sale4">For Sale
    </label>
  </div>
  <div>
    <span class="for_sale_email">
      for sale
    </span>
  </div>

</div>