单选按钮不会显示/隐藏div

Question

我尝试使用css通过单选按钮显示和隐藏div。 我的代码有问题：＆lt;

这里是jsfiddle链接 http://jsfiddle.net/uaLmjnjc/

css

#logo-as-is:checked ~ #upload-image-selected, #select-from-library-selected{
    display:none;   
}

#logo-upload-img:checked ~ #upload-image-selected{
    display:block;
}

#logo-upload-img:checked ~ #select-from-library-selected{
    display:none;
}

#logo-select-library:checked ~ #select-from-library-selected{
    display:block;
}

#logo-select-library:checked ~ #upload-image-selected{
    display:none;
}

#upload-image-selected{
    display:none;
}

#select-from-library-selected{
    display:none;
}

Answer 1

代字号选择器

  

一般兄弟组合选择器非常类似于   相邻的兄弟组合选择器。不同的是   被选中的元素不需要立即成功   元素，但可以出现在它之后的任何地方。

所以他们必须共享同一个父母，他们不能像你一样在网页上任何地方，所以例如

<div class="col-md-1">
    <input type="radio" class="iradio" name="logoselection" id="logo-as-is" />
    <label for="logo-as-is">Hide div</label>
    <div id="hideme">Hidden when radio checked</div>
</div>

#logo-as-is:checked ~ #hideme {
    display:none;   
}

http://jsfiddle.net/L3t8suuy/

会起作用，而如果你试图隐藏的div不与单选按钮共享同一个父级，那么它将不起作用

http://jsfiddle.net/L3t8suuy/1/

这为您提供了两种选择，您可以尝试重新构建HTML abit，以便您尝试隐藏的所有元素也共享同一个父，并按照元素选择时隐藏它们。或者，不幸的是，使用javascript。

Answer 2

您可以使用javascript来实现相同的目标。

它的算法就像 -

检查是否检查了相应的无线电。

如果选中，则隐藏div。