如何根据路由传入EJS的变量值设置单选按钮选中状态？

我发现用文本框显示从路由传入EJS的active变量非常简单，对应的代码如下：

<!-- Active Text Input-->
<div class="form-outline mb-4">
   <label for="active" class="form-label">Active</label>
   <input type="text" name="active" id="active" class="form-control" value="<%= active %>"/>
</div>

但由于active只能取“Yes”或“No”两个值，我更倾向于使用单选按钮，对应的代码如下：

<!-- Active Radio Button-->
<div class="form-outline mb-3" id="activeRadioButton">
   <label class="form-label">Make User Active?</label>
   <div class="activeUser">
      <input type="radio" id="activeYes" name="active" value="Yes">
      <label for="activeYes" class="form-label">Yes</label>
      <input type="radio" id="activeNo" name="active" value="No">
      <label for="activeNo" class="form-label">No</label>
   </div>
</div>

但我不清楚如何根据路由传入的值设置对应的单选按钮为选中状态，请问有解决方法吗？

解决方法 #

你可以通过EJS的条件判断，给匹配active值的单选按钮添加checked属性即可。具体修改如下：

<!-- Active Radio Button-->
<div class="form-outline mb-3" id="activeRadioButton">
   <label class="form-label">Make User Active?</label>
   <div class="activeUser">
      <input type="radio" id="activeYes" name="active" value="Yes" <%= active === 'Yes' ? 'checked' : '' %>>
      <label for="activeYes" class="form-label">Yes</label>
      <input type="radio" id="activeNo" name="active" value="No" <%= active === 'No' ? 'checked' : '' %>>
      <label for="activeNo" class="form-label">No</label>
   </div>
</div>

逻辑说明： #

• 当路由传入的active值为Yes时，<%= active === 'Yes' ? 'checked' : '' %>会输出checked，让“是”的单选按钮处于选中状态；
• 当active值为No时，对应的“否”单选按钮会被自动选中；
• 这种方式完全在EJS渲染阶段完成，不需要额外的前端JS处理。

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