如何定位已选中的动态生成Radio Buttons？

首先，你的代码里有个关键问题：动态生成的单选按钮（radio）没有设置name属性。缺少name的话，这些radio不会被视为同一组，用户可以同时选中多个，也会增加定位选中项的复杂度。第一步要给所有radio添加相同的name属性，比如favorite-movie：

// 在创建fav元素的部分添加这行
fav.setAttribute("name", "favorite-movie");

接下来提供几种定位已选中radio的实用方法：

方法1：直接查询所有已选中的radio #

使用document.querySelectorAll结合CSS选择器input[type="radio"]:checked，可以快速获取所有已选中的单选按钮：

// 获取所有已选中的radio
const selectedRadios = document.querySelectorAll('input[type="radio"]:checked');

// 遍历结果，获取对应的电影ID或信息
selectedRadios.forEach(radio => {
  console.log("选中的电影ID:", radio.id);
  // 可根据ID进一步关联电影元素或数据
});

如果只想针对收藏电影的这组radio，用更精准的选择器：

const selectedFavRadio = document.querySelectorAll('input[name="favorite-movie"]:checked');

方法2：实时监听选中状态 #

如果需要在用户点击radio时立刻响应选中操作，给每个动态生成的radio绑定change事件：

// 在创建fav元素后添加事件监听
fav.addEventListener('change', function() {
  if(this.checked) {
    console.log("当前选中的电影ID:", this.id);
    // 这里可执行选中后的逻辑，比如存储选中ID
  }
});

方法3：在表单提交时获取选中项 #

如果需要在搜索提交等操作时获取选中项，在对应的事件处理函数中执行查询：

// 修改form提交事件，添加选中项获取逻辑
form.addEventListener("submit", (e) => {
  e.preventDefault();
  
  // 获取选中的radio
  const selectedRadio = document.querySelector('input[name="favorite-movie"]:checked');
  if(selectedRadio) {
    console.log("提交时选中的电影ID:", selectedRadio.id);
  }
  
  main.innerHTML = "";
  let searchTerm = search.value;

  if (searchTerm) {
    showMovies(SEARCHAPI + searchTerm)
    search.value = "";
  } else if (!searchTerm) {
    showMovies(apiUrl)
  } else {
    main.innerHTML = "<h1>No result Found!</h1>";
  }
});

完整修改后的showMovies函数片段 #

function showMovies(url) {
  fetch(url)
    .then((res) => res.json())
    .then(function(data) {
      console.log(data.results);
      data.results.forEach((element) => {
        let movYear = new Date(element.release_date);

        const el = document.createElement("div");
        const image = document.createElement("img");
        const title = document.createElement("h2");
        const year = document.createElement("h2");
        const rank = document.createElement("h2");
        const node = document.createTextNode("Favorite: ")

        const wrapper = document.createElement("h2");
        const fav = document.createElement("INPUT");

        fav.setAttribute("type", "radio");
        fav.setAttribute("id", element.id);
        // 添加name属性，将radio归为同一组
        fav.setAttribute("name", "favorite-movie");
        
        // 添加实时选中监听
        fav.addEventListener('change', function() {
          if(this.checked) {
            console.log("选中的电影:", element.title, "ID:", this.id);
          }
        });

        wrapper.insertBefore(node, wrapper.children[0]);
        wrapper.appendChild(fav);
        title.innerHTML = `Title:  ${element.title}`;
        year.innerHTML = `Release:  ${movYear.getFullYear()}`;
        rank.innerHTML = `Rating:  ${element.popularity}`;
        image.src = IMGPATH + element.poster_path;

        el.appendChild(image);
        el.appendChild(title);
        el.appendChild(year);
        el.appendChild(rank);

        el.appendChild(wrapper);
        main.appendChild(el);
      });
    });
}

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