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

Question

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

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

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

因此，例如，我在标签中有一堆复选框:test、test1、test2 等等。当我点击 test 复选框时，文本:“hello world”会出现，如果 test1 被选中，文本:“One 2 three”会出现，如果 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

一个选项是事件委托(delegate)，您可以将一个 事件处理程序添加到所有input 的父/祖先。的，并使用事件属性 event.target检测被点击的那个，并简单地切换其父级的类 div .

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

注意 1:有一个 <p>在像 <span> 这样的内联元素中不是有效标记，所以我删除了它。如果您需要额外的，请使用另一个 <span>并给它类似的样式 <p>具有默认值。

注释 2:id需要是独一无二的，所以请确保您已处理好，并为您的 for_sale_email它不需要，所以我将它更改为一个类。

注意 3:如果您想在所选 input 之间“切换”的，我还添加了执行该操作的代码部分。

堆栈片段

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 就可以完成。

堆栈片段

.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" .

堆栈片段

.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>