如何将选定的单选按钮值插入表格单元格

Question

我有5个单选按钮

<input type="radio" id="rating">1
<input type="radio" id="rating2">2
<input type="radio" id="rating3">3
<input type="radio" id="rating4">4
<input type="radio" id="rating5">5

我有一张桌子

<table id="myTableData"  border="1" style="width:100%">
<tr id="templateRow">
            <th>Ratings</th>
        </tr>
</table>

一个添加按钮

 <input type="button" id="add" value="Add" onclick="addRadioValue()">

我已经编写了用于向表中动态添加行的代码，但是当我选择单选按钮然后单击添加按钮时，所选单选按钮的值应插入到表Ratings中的新单元格中。

我可以为文本框执行此操作，但无法为单选按钮执行此操作。 谁能帮我？

Answer 1

您可以使用querySelector('input[name="rating"]:checked')

Java脚本

function addRow() {

    var myName = document.getElementById("name");
    var auther = document.getElementById("auther");
    var publish = document.getElementById("publish");
    var rating = document.querySelector('input[name="rating"]:checked');
    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML=count ;
    row.insertCell(1).innerHTML= myName.value;
    row.insertCell(2).innerHTML= auther.value;
    row.insertCell(3).innerHTML= publish.value;
    if(rating.checked)
        row.insertCell(4).innerHTML= rating.value;
    else
        row.insertCell(4).innerHTML= "";
    count=count+1;
}

这是我的演示

Answer 2

您的问题是您没有在收音机上设置name ，并且试图使用get id语句获取所选的收音机。 实际上，您实际上需要按名称获取单选元素，并执行循环以检查选择了哪些元素。

工作的jsfiddle： http : //jsfiddle.net/cv4u0nf9/4/

我插入的循环

var ratings = document.getElementsByName("rating");
for (var i=0; i<ratings.length; i++) {
    if (ratings[i].checked) {
        rating = ratings[i];
    }
}