时间戳

首页 > 解决方案 > 如果在一堆唯一复选框中选中一个特定复选框，如何显示特定文本

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

问题描述

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

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

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

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

标签： javascriptcheckboxuniqueevent-listener

解决方案

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

结合CSS 相邻兄弟选择器 +，它变得如此简单

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

注意2：id需要是唯一的，所以确保你已经照顾好了，对你for_sale_email来说它不需要，所以我把它改成了一个类。

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

堆栈片段

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>

推荐阅读