我想要一组单选按钮,以便其中一个出现两次。 结果将如下所示:
棘手的一点是,我想在纯 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>
选中单选按钮时标记文本变为蓝色;但是,由于单选按钮离它很远,我需要某种中继器。
显然,此代码段的方法不起作用。
是否可以“重复”勾选单选按钮的信息?
最佳答案
您需要使用 JS。没有纯粹的方法。也许将 radio 包装在一个看起来像 2 个单选按钮的元素中,单击时它们看起来都像已被选中。但是,如果您需要两个实际的单选按钮一起工作,那您就不走运了。无论如何,与使用 JS 相比,我之前描述的事情会让人非常头疼。
关于html - 在两个地方有相同的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54488027/