使用循环确定哪一组无线电是 "visible" 并获取 checked 的值

Question

我的页面上有 select 允许我动态创建 rodio 组。当我更改 select 选项时，我会删除旧收音机并将新收音机添加到相同的表格中。现在我需要从当前为 'visible' 的给定组中读取 selected 无线电的值。无线电组具有唯一的名称。当我尝试使用下面的代码执行一个函数时，我得到 Uncaught TypeError: document.querySelector(...) is null。我试图通过这些循环获得的是找到正确的无线电组并从 selected 组中获取价值（最重要的）。如果有更简单或不同的方法来做到这一点，我愿意接受好词，最好是在 js 中。这就是我目前所拥有的

for (let key in glowne_klasy_radio) {
   let wartosc = document.querySelector('input[type="radio"][name="' + key + '"]:checked').value; 
}

还有这个

let group_radios_names = ["rzut", "podanie", "faul", "strata", "swobodny_ruch_pilki"];
for (let i = 0; i < group_radios_names.length; i++) {
    let wartosc = document.querySelector('input[type="radio"][name="' + group_radios_names[i] + '"]:checked').value;
}

Answer 1

工作代码，我使用了 element.querySelector，其中 let parent 是我的单选按钮的父元素。

let parent = document.querySelector("form[id='glowneRadios']");
let wartosc = parent.querySelector("input[type='radio']:checked").value;

Answer 2

您的问题是由未选中或不存在的单选按钮引起的。通过引入一种更宽容的方式来请求 .value 属性，可以很容易地避免这种情况，请参见此处：

const radios = ["rzut", "podanie", "faul", "strata", "swobodny_ruch_pilki"];

function getAttr(obj,attr){
  return obj && obj.closest('div').style.display!=="none" && obj[attr]; }

function showHide(){
 document.querySelectorAll('input[type="radio"]').forEach(q=>q.closest("div").style.display=Math.random()>.5?"":"none")
}

function getValues(){
const values={};
radios.forEach(r=>
 values[r]=getAttr(
document.querySelector('input[type="radio"][name="'+r+'"]:checked'),"value"));

console.log(values);
}

// Create radio buttons:
document.querySelector("div").innerHTML=radios.map(r=>'<div>'+r+':'+["A","B","C"].map(v=>'<br><label><input type="radio" name="'+r+'" value="'+v+'"> '+v+'</label>').join('')+'</div>').join("<hr>")
// Connect getValues function to button:
document.querySelectorAll("button").forEach((b,i)=>b.onclick=[showHide,getValues][i]);

<button>show/hide some</button>
<button>check values</button>
<div style="height:650px"></div>

在这个修订版的脚本中，我还通过查看父项的可见性来检查单选按钮组的可见性：

obj.closest('div').style.display!=="none"

只有当这是 true 时才会返回 obj 的值。

使用循环确定哪一组无线电是 "visible" 并获取 checked 的值

Using loop to determine which group of radios is "visible" and getting value of checked

javascript

typeerror

queryselector