使用 css 检查单选按钮时影响 div

Posted 2023-02-26

【中文标题】使用 css 检查单选按钮时影响 div

【英文标题】：Affect div when radiobutton is checked with css

【发布时间】：2013-01-03 13:10:13

【问题描述】：

我正在尝试创建一个 css-only 选择的东西。 我有一个带有三个单选按钮的容器。活动单选按钮必须放置在容器的中间（垂直）。单选按钮必须作为一个整体移动，这意味着如果选择顶部单选按钮，则其他两个必须在其下方隔开；如果选择了中间单选按钮，则其他单选按钮必须位于所选单选按钮的上方和下方。 这很难解释，但听到的是我到目前为止所得到的。 http://jsfiddle.net/PaulvdDool/ZwdUL/1/

在本例中，蓝色按钮位于容器的中间。当我选择绿色按钮时，所有三个按钮都必须向下移动 125px（一个按钮的高度）。但我不能让它工作。

选中一个单选按钮时，我似乎无法影响其他单选按钮。我尝试在按钮周围放置一个额外的容器并更改顶部边距，但我无法影响容器。

<div id="extracontainer">
<form>
<radiobutton 1 + label>
<radiobutton 2 + label>
<radiobutton 3 + label>
</form>
</div>

我也尝试在按钮上方放置一个额外的 div 并更改高度，但我也无法影响这个 div。

<div id="spacer"></div>
<form radiobuttons>

我猜我使用了错误的选择器，做错了其他事情，或者试图用 just css 做一些不可能的事情。

有任何 CSS 解决方案吗？

【问题讨论】：

我能问你吗？为什么你需要它只使用CSS而不使用javascript？

不，此时无法修改特定元素的父元素或之前的兄弟元素。

【参考方案1】：

您真正需要的是 jQuery 或其他一些 JavaScript 库（或者，如果您是原生 js 怪胎，则需要纯 JavaScript）。您需要捕获事件，然后更改要更新的相应元素的 CSS 属性。

目前根本不可能通过 CSS 做到这一点。

我希望这会有所帮助。

【讨论】：

这可以通过稍微改变文档结构和同级选择器来实现。

嗯，也许是可能的，但它也绝对不合适，而且太复杂而无法完成。浪费宝贵的时间。

我很好奇为什么不合适？有些人，我承认我无法理解为什么会回避 javascript。他们需要以这种方式完成此任务。

不合适主要是因为您需要为 10 个或更多 DOM 元素完成此特定功能的情况。想象一下你自己做一些重复的复制粘贴只是为了避免写两行 jQuery。你会那样做吗？你认为这样合适吗？老实说，怀疑它。

【参考方案2】：

这是可以做到的。这完全取决于具体情况以及文档结构。

我必须为每个标签添加一个类：cPantsx 其中 x 与裤子收音机的数字相同。

然后我不得不重新排列 html 如下：

<div id="pantscontainer">
    <input type="radio" name="pants" id="pants1" value="pants1" />
    <input type="radio" name="pants" id="pants2" value="pants1" />
    <input type="radio" name="pants" id="pants3" value="pants1" />
    <label for="pants1" class='cPants1'><span></span></label>
    <label for="pants2" class='cPants2'><span></span></label>
    <label for="pants3" class='cPants3'><span></span></label>
</div>​

一切都必须变成position:relative;，这样我才能调整容器内的位置。

在那之后，魔法真的在这里发生了：

#pantscontainer > input[id="pants1"]:checked ~ .cPants1 span
    top:125px;   

#pantscontainer > input[id="pants1"]:checked ~ .cPants2 span
    top:-125px;   

#pantscontainer > input[id="pants2"]:checked ~ .cPants2 span
    top:0px;

#pantscontainer > input[id="pants2"]:checked ~ .cPants1 span
    top:0px;

#pantscontainer > input[id="pants3"]:checked ~ .cPants3 span
    top:-125px;

#pantscontainer > input[id="pants3"]:checked ~ .cPants1 span
    top:0px;

#pantscontainer > input[id="pants3"]:checked ~ .cPants2 span
    top:125px;

基本上，通过调整页面上元素的位置，我能够非常明确地定位有问题的元素，并确保它们始终相互移开。

Here is a fork of your fiddle

我应该提到，这绝不是一个简单的解决方案。它更像是一个纸牌屋。如果您必须添加更多元素，则需要重新编写整个内容。它会扩展，但要做到这一点需要付出很多努力。