JS 隐藏所有具有相同 class 的元素，除了一个

Question

我有多个复选框，其中一些具有相同的 class、名称和值。除了带有 JS 或 Jquery 的以外，我该如何隐藏它们？这是我的代码，它回显了多个复选框（它们前面有一个循环）

 <input style="width: auto;" type="checkbox" name="<?php the_field('tiker'); ?>" value="<?php the_field('tiker'); ?>">
 <label for="scales"><?php the_field('tiker'); ?></label>

输出输入示例：

    <div style="margin-top: 5px;"> 
<input style="width: auto;" type="checkbox" name="SBER" value="SBER"> 
<label for="scales">SBER</label>
<input style="width: auto;" type="checkbox" name="SBER" value="SBER"> 
<label for="scales">SBER</label> 
<input style="width: auto;" type="checkbox" name="vtbr" value="vtbr"> 
<label for="scales">vtbr</label> 
<input style="width: auto;" type="checkbox" name="APL" value="APL"> 
<label for="scales">APL</label>
</div>

Answer 1

如果预先知道复选框值，那么您可以简单地使用 css 到 select 并隐藏重复项。我们不能像:first-child or :nth-child for this because we're selecting by attribute. Yet, we can use the general sibling combinator那样使用伪类（~）来做等价的事情。

css select 或将 display:none 应用到除第一个匹配项之外的所有匹配项，如代码段中所示。请注意，您还需要隐藏关联的标签。

但是，如果事先不知道复选框的值，则需要使用 JavaScript 隐藏它们。更好的是，PHP 在后端过滤掉重复项。

另见：CSS select the first child from elements with particular attribute

input[value=SBER]~input[value=SBER],
input[value=SBER]+label~input[value=SBER]+label {
  display: none;
}

<div style="margin-top: 5px;">
  <input style="width: auto;" type="checkbox" name="SBER" value="SBER">
  <label for="scales">SBER</label>
  <input style="width: auto;" type="checkbox" name="SBER" value="SBER">
  <label for="scales">SBER</label>
  <input style="width: auto;" type="checkbox" name="vtbr" value="vtbr">
  <label for="scales">vtbr</label>
  <input style="width: auto;" type="checkbox" name="APL" value="APL">
  <label for="scales">APL</label>
  <input style="width: auto;" type="checkbox" name="SBER" value="SBER">
  <label for="scales">SBER</label>
</div>

JS 隐藏所有具有相同 class 的元素，除了一个

JS hide all elements with same class except one

javascript

checkbox

jquery