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()">

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

我能够为文本框做这件事，但我无法用它来做单选按钮。任何人都可以帮助我吗？

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;
}

这是我的Demo

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];
    }
}

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

2 个答案: