html - 两个单选按钮有条件地共享一个 “id” 吗？

Question

我正在尝试在移动设备和桌面设备上采用不同的页面设计。 为此，需要针对移动界面重新设计 3 个单选按钮 block 和其他一些内容，但位于同一页面上。

所以，我担心的是，当我根据媒体查询隐藏和显示时，2 个 block 是否可以共享一个 ID。

示例:

block 1

<div class="visible-xs">
   <input type="radio" name="yellow" id="yellow-color" value="14" 
   class="yellow radio-custom" checked="checked" />
   <input type="radio" name="red" id="red-color" value="52" 
   class="red radio-custom" />
</div>

block 2

<div class="hidden-xs">
   <input type="radio" name="yellow" id="yellow-color" value="14" 
   class="yellow radio-custom1" checked="checked" />
   <input type="radio" name="red" id="red-color" value="52" 
   class="red radio-custom1" />
</div>

它在功能方面工作正常，但问题是移动页面上的 radio 未被检查

Answer 1

要对 radio 输入进行分组，他们必须使用相同的name属性并自动检查其中一个，只有一个 radio 输入具有相同的名称-组必须具有checked="checked"属性。

如果两个或多个具有该属性，则默认情况下不会选择任何一个。