javascript - 如何使用选定的单选按钮获取表格单元格的内容？

Question

我正在尝试使用所选 radio 获取单元格的内容。这是我的 JavaScript，但它不起作用:

document.getElementById(document.querySelector('input[name="celselectie"]:checked').parentNode).innerHTML=(here some var);

HTML:

<table id="speelveld">
<tr><td><input type="radio" name="celselectie" value="cel001"/></td>
<td><input type="radio" name="celselectie" value="cel002"/></td>
<td><input type="radio" name="celselectie" value="cel003"/></td>
<td><input type="radio" name="celselectie" value="cel004"/></td>
<td><input type="radio" name="celselectie" value="cel005"/></td>
[.......]
<td><input type="radio" name="celselectie" value="cel099"/></td>
<td><input type="radio" name="celselectie" value="cel100 "/></td></tr>
</table>

Answer 1

document.querySelector ，返回文档中与指定选择器组匹配的第一个元素。

因此您的代码将无法用于捕获多个元素。

这是我的方法:

1) 获取所有名为 celselectie 的单选按钮

var d = document.getElementsByName('celselectie');   

2) 迭代并检查其“checked”属性，如果为true则获取其parentNode 并打印 innerText。

for (var i = 0; i < d.length; i++) {
    if (d[i].checked) {          
        console.log(d[i].parentNode.innerText);
    }
}

<小时/>

最终代码:

var d = document.getElementsByName('celselectie');    
for (var i = 0; i < d.length; i++) {
    if (d[i].checked) {          
        console.log(d[i].parentNode.innerText);
    }
}

JSFiddle