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

【问题标题】：Radio button won't show/hide divs单选按钮不会显示/隐藏 div
【发布时间】：2015-03-28 09:21:25
【问题描述】：

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

这是 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;
}

【问题讨论】：

标签： html css radio-button radio-group

【解决方案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 以便你试图隐藏的所有元素也共享相同的父元素并跟随元素选择时隐藏它们。或者，不幸的是，求助于使用 javascript。

【讨论】：

@Gilbert 不幸的是，CSS 缺少这种功能。如果你想保持你的 HTML 保持原样并做你想做的事，你就不得不求助于使用 javascript 来为你做这件事。

【解决方案2】：

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

它的算法是这样的 -

检查对应的radio是否被选中。

如果选中则隐藏 div。

【讨论】：