单选按钮label与id匹配问题及required属性用法咨询

你现在的报错来自顶部那个<label for="ceSiteBanner">——页面里根本没有id为ceSiteBanner的元素，你的单选按钮id是ceSiteBanner1和ceSiteBanner0。而这个顶部标签本质是整个单选组的标题，不是绑定某个具体单选按钮的，直接去掉它的for属性就能解决报错，它只要起到说明组内容的作用就够了。

从无障碍访问规范来说，更标准的做法是用<fieldset>包裹整个单选组，用<legend>代替这个顶部label，这样屏幕阅读器能更好识别这是一组关联选项。

单选按钮组只需要给其中一个按钮加required属性就行。浏览器会检查整个同名（name属性相同）的单选组是否有选中项，不需要每个按钮都加。你现在两个都加也不会报错，但属于冗余操作，去掉一个即可。

<div class="form-group col-md-4">
  <!-- 方案1：直接去掉for属性 -->
  <label>
    <i id="ceAutoRegister_icon" class="iconRequired icon-information-outline"></i> Display Site Banner
    <i onclick="displayInfo('ceSiteBanner_Info');" class="iconMore icon-more"></i>
  </label>

  <!-- 方案2：用fieldset+legend更符合无障碍规范（可选） -->
  <!-- <fieldset>
    <legend>
      <i id="ceAutoRegister_icon" class="iconRequired icon-information-outline"></i> Display Site Banner
      <i onclick="displayInfo('ceSiteBanner_Info');" class="iconMore icon-more"></i>
    </legend> -->

  <div class="form-check form-check-inline">
    <label class="form-check-label" for="ceSiteBanner1">
      <input class="form-check-input" type="radio" name="ceSiteBanner" id="ceSiteBanner1" value="1" <?=$ceSiteBanner1?> required/>
      <span class="radio-icon"></span>
      <span class="form-check-description">Yes</span>
    </label>
  </div>
  <div class="form-check form-check-inline">
    <label class="form-check-label" for="ceSiteBanner0">
      <input class="form-check-input" type="radio" name="ceSiteBanner" id="ceSiteBanner0" value="0" <?=$ceSiteBanner0?>/>
      <span class="radio-icon"></span>
      <span class="form-check-description">No</span>
    </label>
  </div>
  <!-- </fieldset> -->
</div>

补充：我给每个单选按钮对应的form-check-label加上了for属性，和各自的id绑定——你原来的代码里没加，虽然label包裹input也能触发选中，但加for+id的配对会更稳妥，尤其是对无障碍工具更友好，同时完全不影响你通过不同id单独控制单选按钮的JS需求。

内容的提问来源于stack exchange，提问作者rolinger