Question

我有一个使用javascript创建的div。

div具有不同数量的子元素，这些子元素都是复选框。

我想使用循环检索所有复选框的ID。

div已经传递到我正在使用的类中，并被称为：

oInput

我知道这工作正常，因为我能够使用以下行检索div具有的子元素的数量：

oInput.childNodes.length

但我的问题是我不知道如何检索子元素的id。我想要做的就是让id现在显示在一个警告框中。

到目前为止，我有：

for (var ii = 0; ii < oInput.childNodes.length; ii++)
        {
            var childId = oInput.childNodes[ii].id;
            alert("Child " + childId);
        }

但这不是正确的解决方案。我一直在搜索，但似乎没有任何明确的答案。我只是在寻找一个使用javascript的解决方案，它将在循环中的警告框中显示答案。

Answer 1

这对我有用：

<html>
<body>
<div id="oInput">
    <input id="1" type="text">
    <input id="2" type="text">
    <input id="3" type="text">
    <input id="4" type="text">
    <input id="5" type="text">
</div>
<script type="text/javascript">
    var oInput = document.getElementById('oInput'),
            oChild;
    for(i = 0; i < oInput.childNodes.length; i++){
        oChild = oInput.childNodes[i];
        if(oChild.nodeName == 'INPUT'){
            alert(oChild.id);
        }
    }
</script>
</body>
</html>

如果我在标题中放入'script'标签，它就不起作用，因为页面还没有完全加载而div还没有存在 - 也许那是你的问题？

在Internet Explorer 11和Chrome中测试。

Answer 2

你可以试试这个：

var oInput = document.getElementById('oInput');
for (var ii = 0; ii < oInput.childNodes.length; ii++)
{
    var childId = oInput.childNodes[ii].id;
   if(typeof(childId) !== 'undefined')
    alert("Child " + childId);
}

Answer 3

有几种方法可以做到这一点，但我发现最可靠的方法是使用jQuery：

$("#myElementID").find("input[type='checkbox']").each(function (){
  alert("Child " + $(this).attr('id'));
});

或者，您可以使用您的代码，但只需稍微修改一下：

for (var ii = 0; ii < oInput.childNodes.length; ii++)
{
    var currentChild = oInput.childNodes[ii];

    // this check is to make sure that the child you've selected is an input
    if (currentChild.tagName.toLowerCase() == "input"){

       // now you want to make sure you only retrieve the id's of checkboxes 
       if (currentChild.type.toLowerCase() == "checkbox"){

           var childId = oInput.childNodes[ii].id;
           alert("Child " + childId);
       }
    }
}

Javascript使用有关父元素的信息获取子元素的ID

3 个答案: