纯CSS解决方案 - 选中单选按钮时，我希望标记为元素以可见或隐藏

Posted 2023-03-27

【中文标题】纯CSS解决方案 - 选中单选按钮时，我希望标记为元素以可见或隐藏

【英文标题】：Pure CSS solution - When a radio button is checked I want labeled elements to go either visible or hidden

【发布时间】：2021-04-30 12:30:14

【问题描述】：

我有四个单选按钮来切换：

矿山

含硅矿

含磷矿

包括黄金在内的矿山

<label> 
        <input type="radio" name="mineRadio" 
               id="allmines" checked> All
</label> 
<label> 
        <input type="radio" name="mineRadio"
               id="sili"> Silicium
</label> 
    <label> 
        <input type="radio" name="mineRadio"
               id="phos"> Phosphate
</label> 
    <label> 
        <input type="radio" name="mineRadio"
               id="gold"> Gold
</label> 

地雷是地图顶部的圆形元素：

<a href="#mine1" id="mine1" style="top: 74.72%; left: 25.89%; width: 1vw; height: 1vw;" class="sili phosp"></a>
<a href="#mine2" id="mine2" style="top: 45.25%; left: 45.21%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine3" id="mine3" style="top: 54.22%; left: 25.89%; width: 1vw; height: 1vw;" class="gold"></a>
<a href="#mine4" id="mine4" style="top: 41.75%; left: 75.34%; width: 1vw; height: 1vw;" class="phosp gold"></a>
<a href="#mine5" id="mine5" style="top: 78.72%; left: 25.49%; width: 1vw; height: 1vw;" class="sili phosp gold"></a>
<a href="#mine6" id="mine6" style="top: 47.42%; left: 88.65%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine7" id="mine7" style="top: 21.85%; left: 10.42%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine8" id="mine8" style="top: 14.21%; left: 32.85%; width: 1vw; height: 1vw;" class="sili gold"></a>
<a href="#mine9" id="mine9" style="top: 65.64%; left: 31.21%; width: 1vw; height: 1vw;" class="sili"></a>

例如，当 'Silicium Mine' 按钮被选中时，我希望具有 Silicium 的地雷可见，而没有此属性的地雷则隐藏。

如何根据选中的单选按钮将地雷的显示设置为可见/隐藏？

【问题讨论】：

这里有一个很好的答案：***.com/questions/50919193/…

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

【参考方案1】：

您需要一个可以使用兄弟选择器的结构，父选择器在纯 CSS 中不可用。因此，您需要从标签中取出输入并使用 for 属性将每个标签与其相关输入链接（没有它也可以工作，但点击标签将无法使用）。

可与:checked 伪类和同级选择器~ 一起使用的结构示例

/* Demo : toggle display from an id attribute to later sibblings of a specific class */a 
  border: solid;
  display: none;


a:before /* show them by their class names */
  display: inline-block;
  content: attr(class);
  padding:0.15em 0.5em;


#map margin:1em;padding:1em;border:solid;
#sili:checked ~ #map .sili,
#phos:checked ~ #map .phosp,
#gold:checked ~ #map .gold,
#allmines:checked ~ #map a 
  display: inline;

<input type="radio" name="mineRadio" id="allmines" checked> <label for='allmines'> All
</label>

<input type="radio" name="mineRadio" id="sili"><label for='sili'> Silicium
</label>

<input type="radio" name="mineRadio" id="phos"> <label for='phos'> Phosphate
</label>

<input type="radio" name="mineRadio" id="gold"> <label for='gold'> Gold
</label> The mines are circle-shaped elements on top of a map:
<div id="map">
<a href="#mine1" id="mine1" style="top: 74.72%; left: 25.89%; width: 1vw; height: 1vw;" class="sili phosp"></a>
<a href="#mine2" id="mine2" style="top: 45.25%; left: 45.21%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine3" id="mine3" style="top: 54.22%; left: 25.89%; width: 1vw; height: 1vw;" class="gold"></a>
<a href="#mine4" id="mine4" style="top: 41.75%; left: 75.34%; width: 1vw; height: 1vw;" class="phosp gold"></a>
<a href="#mine5" id="mine5" style="top: 78.72%; left: 25.49%; width: 1vw; height: 1vw;" class="sili phosp gold"></a>
<a href="#mine6" id="mine6" style="top: 47.42%; left: 88.65%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine7" id="mine7" style="top: 21.85%; left: 10.42%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine8" id="mine8" style="top: 14.21%; left: 32.85%; width: 1vw; height: 1vw;" class="sili gold"></a>
<a href="#mine9" id="mine9" style="top: 65.64%; left: 31.21%; width: 1vw; height: 1vw;" class="sili"></a>
</div>

关于二重奏输入/标签的信息：https://developer.mozilla.org/en-US/docs/Web/html/Element/label

HTML <label> 元素表示用户界面中项目的标题。

for 属性

对于 与<label> 元素在同一文档中的可标记表单相关元素的id。如果该标签元素是可标记元素，则文档中第一个 ID 与 for 属性值匹配的元素是该标签元素的标记控件。如果它不可标记，则for 属性无效。如果还有其他元素也与 id 值匹配，则在文档的后面部分将不考虑它们。 注意：<label> 元素可以同时具有 for 属性和包含的控制元素，只要 for 属性指向包含的控制元素即可。

关于兄弟选择器的信息：https://css-tricks.com/child-and-sibling-selectors/