html - 在两个地方有相同的单选按钮

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。没有纯粹的方法。也许将 radio 包装在一个看起来像 2 个单选按钮的元素中，单击时它们看起来都像已被选中。但是，如果您需要两个实际的单选按钮一起工作，那您就不走运了。无论如何，与使用 JS 相比，我之前描述的事情会让人非常头疼。