在两个位置具有相同的单选按钮

Question

我希望有一组单选按钮，使它们中的一个出现两次。 结果将如下所示：

棘手的一点是，我想在纯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的情况下实现这种行为？

---

修改

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

例如，假设以下代码段：

.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>标签文本变为蓝色；然而，由于单选按钮是远离它，我需要某种形式的中继器。 显然，这段代码的办法是行不通的。

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

Answer 1

您需要使用JS。没有纯粹的方法。也许将单选包裹在一个看起来像2个单选按钮的元素中，当单击它们时，它们就像选择一样都看起来。但是，如果您需要两个可以同时使用的单选按钮，那么您就不走运了。在任何情况下，与使用JS相比，我之前描述的事情都会令人头疼。