使用循环来确定哪组无线电是“可见的”，并获取选中的值

Question

我在我的页面上有选择，允许我动态创建rodio组。当我更改选择选项时，我会删除旧的单元格，并将新单元格附加到相同的表单中。现在我需要从当前“可见”的给定组中读取所选单选按钮的值。单播组具有唯一的名称。当我尝试用下面的代码执行一个函数时，我得到了未捕获的TypeError: document.querySelector(...)为空。我试图通过这些循环获得的是找到正确的radios组，并从所选的组中获得值(最重要的)。如果有一种更简单或不同的方式来做这件事，我对好单词持开放态度，最好是用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

您的问题是由未选中或不存在的单选按钮引起的。通过引入一种更宽容的方式来请求.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的值。

Answer 2

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

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