在两个地方有相同的单选按钮答案

【问题标题】：Have the same radio button at two places在两个地方有相同的单选按钮
【发布时间】：2019-02-02 07:05:17
【问题描述】：

我想要一组单选按钮，以便其中一个出现两次。结果如下所示：

棘手的一点是我想在 纯 HTML/CSS 中实现这一点（尽管我怀疑 CSS 在这里会有所帮助）。

这是我为生成上面的四个单选按钮而编写的代码：

<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button1">Choice 1</label>

<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button">Choice 1</label>

<input type="radio" name="buttons" value="choice2" id="button3"/>
<label for="button3">Choice 2</label>

<input type="radio" name="buttons" value="choice3" id="button4"/>
<label for="button4">Choice 3</label>

我天真地认为将相同的值赋予第一个按钮会使它们表现得像一个，但当然不是。

是否有可能在没有任何 JS 的情况下实现这种行为？

编辑

这听起来可能很奇怪，所以这是我的用例。我最终想要的是有一个存储全局状态的单选按钮，并且可以在多个地方访问它。

例如，假设如下 sn-p：

.state-repeater {
    visibility: hidden;
}


#button.state-repeater:checked > p {
    color: blue;
}

<input type="radio" id="button" />
<label for="button">Button</label>

<!--
Lots of blocks; the two parts are totally uncorrelated;
so the classical sibling selector tricks do not work
-->

<input class="state-repeater" type=radio id="button" />
<p>The button is checked</p>

我希望<p> 标记文本在选中单选按钮时变为蓝色；但是，由于单选按钮离它很远，我需要某种中继器。显然，这种sn-p的做法是行不通的。

是否可以“重复”选中单选按钮的信息？

【问题讨论】：

标签： html css radio-button

【解决方案1】：

你需要使用 JS。没有纯粹的方法。也许将收音机包装在一个看起来像 2 个单选按钮的元素中，当点击它们时，它们看起来都像是被选中了。但是，如果您需要两个可以协同工作的实际单选按钮，那么您就不走运了。无论如何，与使用 JS 相比，我之前描述的事情将是一个巨大的头痛。

【讨论】：