Question

我正在尝试循环使用单选按钮，但没有成功。

尽管表格的长度是3（与无线电按钮的数量相同），但我无法访问单个元素。

目的是改变文本。它的工作原理如果我想访问第一个元素：

var child = form.firstChild;
alert(child.nextSibling.nextSibling.nextSibling.innerHTML);

这将返回第一个radiobutton文本。

但是如果我从这个

创建一个循环

function getRadioBInfo() {
    var form = document.getElementById("myform");

    for (var i = 0; i < form.length; i++) {
        var iForm = form[i];
        var child = iForm.firstChild;
        alert(child.nextSibling.nextSibling.nextSibling.innerHTML);
    }
}

..我得到了TypeError：child为null

此代码有什么问题？

HTML

<form action="" name="deliver_form" id="myform" style="display: block;">
    <input type="radio" name="delivering" id="radio1" value="deliver"> <label>label1</label><br>
    <input type="radio" name="delivering" value="comeandtake"> <label>label2</label><br>
    <input type="radio" name="delivering" value="express"> <label>label3</label>
</form>

Answer 1

由于您已标记jquery，因此可以使用：

Answer 2

我认为您正在寻找类似的内容。

var form = document.getElementById("myform");
    
for (var i = 0; i < form.length; i++) {
    var child = form.getElementsByTagName('input')[i];
    alert(child.nextSibling.nextSibling.innerHTML);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" name="deliver_form" id="myform" style="display: block;">
    <input type="radio" name="delivering" id="radio1" value="deliver"> <label>label1</label><br>
    <input type="radio" name="delivering" value="comeandtake"> <label>label2</label><br>
    <input type="radio" name="delivering" value="express"> <label>label3</label>
</form>

Answer 3

为什么你没有name

试试这个

function getRadioBInfo() {

    var arrRadioBtns = document.getElementsByName("delivering");

    for (var i = 0; i < arrRadioBtns.length; i++) {
      var btn = arrRadioBtns[i];          
      alert (btn.value);
    } 
}

Working Example

Answer 4

form [i]仅包含单选按钮。如果您想拍摄标签，请尝试使用

var lbl = document.getElementsByTagName('label'); 
for (var i=0;i < lbl.length; i++){ lbl[i].innerHTML = 'radio' + i; }

并遍历标签并更改文字

Answer 5

要在单选按钮后跟随标签，您可以尝试：

function getRadioBInfo() {

    var form = document.getElementById("myform");
    var radios = form.querySelectorAll('input[type=radio]');
    var i;

    for (i = 0; i < radios.length; i++) {
        var radio = radios[i];
        console.log(radio.nextSibling.innerHTML);
    }
 }

 getRadioBInfo();

陷阱：收音机或按钮之间不应有空格。否则nextSibling会返回文字，而不是label

<强> demo

Answer 6

观察结果

var form = document.getElementById（“myform”）; form不是数组，相反它将是一个String，所以你是string.length;
您可以使用doucment.getElementsByName获取所有名称为

希望此代码段有用

function getRadioBInfo() {
//Retun collection of radio button with same name
var _getRadio = document.getElementsByName("delivering");
// loop through the collection
for(var i = 0;i<_getRadio.length;i++){
//nextElementSibling will return label tag next to each radio input
   console.log(_getRadio[i].nextElementSibling.innerHTML)
  }
}
getRadioBInfo();

Jsfiddle

循环收音机按钮形式javascript

6 个答案: