Javascript get ID of a child element using information about the parent
Question
I have a div created using javascript.
The div has a varying number of child elements that are all check boxes.
I want to retrieve the id's of all the checkboxes using a loop.
The div has been passed through into the class I am using, and has been called:
oInput
I know this is working fine as I am able to retrieve the number of child elements that the div has, using the following line:
oInput.childNodes.length
But my problem is I do not know how to retrieve the id of the child elements. All I want to do is to get the id's to display in an alert box for now.
So far I have:
for (var ii = 0; ii < oInput.childNodes.length; ii++)
{
var childId = oInput.childNodes[ii].id;
alert("Child " + childId);
}
But this is not the correct solution. I have searched around but there does not seem to be a clear answer to this question anywhere. I am only looking for a solution using javascript that will display the answer in the alert box in the loop.
3 answers
solution1
5 ACCPTED 2014-12-02 09:33:00
This works for me:
<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>
If I put the 'script' tag in the header it didn't work because the page hadn't fully loaded and the div did not exist yet - perhaps that was your problem?
Tested in Internet Explorer 11 and Chrome.
solution2
1 2014-12-02 09:45:38
There are a few ways you can do this but the one I've found most reliable is using jQuery:
$("#myElementID").find("input[type='checkbox']").each(function (){
alert("Child " + $(this).attr('id'));
});
Alternatively, you can use your code, but just modifying it a bit:
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);
}
}
}
solution3
0 2014-12-02 09:45:19
you can try this:
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.