如何在一个<div>中嵌套复选框并在选中时更改另一个<div>中的元素？

Question

当我在<div>元素中嵌套我的复选框时，我的代码停止工作。我需要在选中某个复选框后显示图像。代码无需在<div>中嵌套复选框即可工作。

我希望我的复选框嵌套在一个<div>中，这样在选中某个复选框时，它就会将<div>中带有图像的显示值从none更改为inline-block。

我什么都试过了，但我想我就是想不通这个问题。

<body>

<style>
  input[type=checkbox]:checked.ivo ~ div #fotoivo {
    display: inline-block;
 }

input[type=checkbox]:checked.ian ~ div #fotoian {
    display: inline-block;
 }

input[type=checkbox]:checked.non ~ div #fotonon {
    display: inline-block;
 }

#fotoivo {
    width: 200px;
    display: none;
}

#fotoian {
    width: 200px;
    display: none;
}

#fotonon {
    width: 200px;
    display: none;
}
</style>

<!--Checkboxes (works without the <div> wrapped around)-->
<!--<div>-->
  Ivo: <input type="checkbox" name="ivoian" class="ivo">
  Ian: <input type="checkbox" name="ivoian" class="ian">
  Non-binair: <input type="checkbox" name="ivoian" class="non">
<!--</div>-->

<!--Images that should change from display: none to inline-block.-->
  <div>
    <img id="fotoivo" src="ivo.jpg" alt="#">

    <img id="fotoian" src="ian.jpg" alt="#">

    <img id="fotonon" src="non.jpg" alt="#">
  </div>

</body>

Answer 1

Tilda (~)是兄弟选择器。当您嵌套输入时，div包装图像不再是它们的兄弟。因为css没有父选择器，所以你不能只用CSS来做。当然，您可以使用简单的JS来完成此任务。

您可以这样做：https://stackoverflow.com/a/7691692/11404579

编辑:此外，只使用CSS有一点老生常谈的方法，但你会丢失原生输入。您可以将输入放在根元素中，这样您就可以使用同级选择器选择图像并隐藏输入。并在一些嵌套元素中放置这些隐藏输入的标签。这样，当您单击(嵌套的)标签时，您可以检查输入a是否可以控制内容。