使用 jquery 动态检查单选按钮

Question

我有一个 div，它有一个用于动态创建单选按钮的输入，默认情况下我需要检查一个值。我为所有单选按钮使用了唯一的名称，并使用 document.querySelector 结合名称和值来选择它们

Answer 1

Template literals 会帮助你。

逻辑

• 使用可用选项呈现单选按钮。
• 在更改下拉列表时更新单选按钮的 checked 属性，方法是使用正确的属性选择它们。

我为所有单选按钮使用了一个唯一的名称，并使用document.querySelector 结合name 和value 选择它们

工作小提琴

$(document).ready(function () {
  const genders = ['Male', 'Female', 'None'];
  let template = '';
  genders.forEach((gender) => {
    template += `
      <div>
        <input id="${gender}_Gender" 
          class="htmlControl"
          type="radio" 
            ${gender === "None" ? 'checked' : ''}
            name = "gender_selection_radio" 
            value="${gender}">
            <label for="${gender}_Gender_${gender}" class="form_label"> ${gender}</label>
      </div>`
  });
  $("#ddContainer").html(template);
});
function updateRadioSelection() {
  const selectedValue = document.getElementById("genderSelector").value;
  if (selectedValue) {
    document.querySelector(`input[name='gender_selection_radio'][value=${selectedValue}]`).checked = true;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="ddContainer"></div>
<select name="" id="genderSelector" onchange="updateRadioSelection()">
  <option value="">Please Select</option>
  <option value="Male">Male</option>
  <option value="Female">Female</option>
  <option value="None">None</option>
</select>