从存储在变量中的值中选择单选按钮答案

【问题标题】：Selecting a radio button from a value stored in a variable从存储在变量中的值中选择单选按钮
【发布时间】：2022-12-11 03:24:32
【问题描述】：

我发现显示从路由传递到我的 EJS 的变量值（活动）非常简单：

<!-- 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>

但我不知道如何根据通过路由传入的值“设置”适当的按钮。有没有办法做到这一点？

【问题讨论】：

标签： javascript express ejs

【解决方案1】：

需要控制input type=radio的checked属性：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#attr-checked

为了使其成为可能，您可以在输入收音机上使用这样的表达式，期望值为 Yes：

checked="<%= selectedValue === 'Yes' %>">

像这样的表达式在输入收音机上期望值为No：

checked="<%= selectedValue === 'No' %>">

这是整个街区：

<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"
        checked="<%= selectedValue === 'Yes' %>">
      <label for="activeYes" class="form-label">Yes</label>
      
      <input
        type="radio"
        id="activeNo"
        name="active"
        value="No"
        checked="<%= selectedValue === 'Yes' %>">
      <label for="activeNo" class="form-label">No</label>
   </div>
</div>

【讨论】：