Question

请参阅底部的小提琴链接。我有两个问题：

如何将HTML文本添加到这些单选按钮。我必须给他们$和％值（对于用户）。
查找所选每个单选按钮的值。例如，用户添加了10行（每行有2个单选按钮）。我已经迭代了一个循环来查找输入类型并查看是否选中了该按钮然后找到它的值。

不工作，指导我做错了什么。

var i=0;
window.myAdd = function(){
  var x = i;
  var butts = document.createElement("INPUT");
  butts.setAttribute("type", "radio");
  butts.setAttribute("name", "currency"+x);
  butts.setAttribute("value", "%");
  butts.setAttribute("id", "radio"+i);
  //var node = document.createTextNode("%");
  //butts.appendChild(node);
  i=i+1;
  //console.log(butts);

  var butts_1 = document.createElement("INPUT");
  butts_1.setAttribute("type", "radio");
  butts_1.setAttribute("name", "currency"+x);
  butts_1.setAttribute("value", "$");
  butts_1.setAttribute("id", "radio"+i);
  i=i+1;
  //console.log(butts_1);

  var row = document.createElement("TR");
  //document.getElementById('tab').appendChild(butts);
  //document.getElementById('tab').appendChild(butts_1);
  row.appendChild(butts);
  row.appendChild(butts_1);
  document.getElementById('tab').appendChild(row);
  x=x+1;
}
window.myfunction = function(table){
 //var x = String(document.getElementById('radioP').value);
 //alert(x);
 for(var i=0;i<table.elements.length;i++){
    if(table.elements[i].type =='radio'){
        if(table.elements[i].checked == true){
            alert(table.elements[i].value);
        }
    }
 }
}

Answer 1

1）您必须使用<label>元素，例如：

<input id="radio_1" type="radio" value="1" />
<label for="radio_1">$</label>

<input id="radio_2" type="radio" value="2" />
<label for="radio_2">%</label>

2）你必须遍历它们。考虑到所有的无线电都在一些带有“容器”类的div中，你需要这样的东西：

document.getElementById('get_values').addEventListener('click', function() {
    var radios = document.querySelectorAll('.container input[type="radio"]');
    values = {};
    for(i=0; i<radios.length; i++) {
        var radio = radios[i];
        var name = radio.getAttribute('name');
        if(radio.checked) {
            values[name] = radio.value;
        } else {
            values[name] = values[name] || null;
        }
    }
    alert(JSON.stringify(values));
});

看到这个小提琴：http://jsfiddle.net/andunai/gx6quyo0/

Answer 2

我已更正您的脚本：

var i = 0;
window.myAdd = function() {
  var x = i;
  var butts = document.createElement("INPUT");
  butts.setAttribute("type", "radio");
  butts.setAttribute("name", "currency" + x);
  butts.setAttribute("value", "%");
  butts.setAttribute("id", "radio" + i);
  //var node = document.createTextNode("%");
  //butts.appendChild(node);
  i = i + 1;
  //console.log(butts);

  var butts_1 = document.createElement("INPUT");
  butts_1.setAttribute("type", "radio");
  butts_1.setAttribute("name", "currency" + x);
  butts_1.setAttribute("value", "$");
  butts_1.setAttribute("id", "radio" + i);
  i = i + 1;
  //console.log(butts_1);

  var row = document.createElement("TR");
  //document.getElementById('tab').appendChild(butts);
  //document.getElementById('tab').appendChild(butts_1);
  row.appendChild(butts);
  row.appendChild(butts_1);
  document.getElementById('mytable').appendChild(row);
  x = x + 1;
}
window.myfunction = function(table) {
  //var x = String(document.getElementById('radioP').value);
  //alert(x);
  //debugger;
  for (var i = 0; i < table.rows.length; i++) {
    var row = table.rows[i];
    for (var j = 0; j < row.childNodes.length; j++) {
      if (row.childNodes[j].type == 'radio') {
        if (row.childNodes[j].checked == true) {
          alert(row.childNodes[j].value);
        }
      }
    }

  }
}

<button onclick='myAdd()'>Add Radio Buttons</button>
<table id="mytable" name="mytable"></table>
<button onclick='myfunction(document.getElementById("mytable"))'>GET VALUE</button>

单选按钮的值使用循环并向其添加HTML文本

2 个答案: