Sure, what did you expect???
nextSibling means the next element in the DOM that is at the *SAME LEVEL* as the current one.
So with
<TD><INPUT><LABEL></TD>
both the INPUT and the LABEL have the same parent (to wit, the TD) and so of course they are "siblings" and LABEL is the "nextSibling" of INPUT.
But with
<TD><INPUT></TD>
<TD><LABEL></TD>
indeed INPUT Is a child of the first TD, but it is the *ONLY* child and so has no siblings. LABEL is a child of a completely different object.
While you *COULD* figure out what the correct relative node path is to get from INPUT to LABEL (in this case, I *think* it would be
parentNode.firstSibling.firstChildNode
or something like that), I wouldn't recommend messing with that. What happens when somebody sticks something else in there?
The right generic solution to this is to give matching IDs to the <INPUT> and the <LABEL>, perhaps with a prefix to differentiate between them.
Example:
Code:
<html>
<head>
<style>
.style17 { background-color: black; color: yellow; font-weight: bold; font-size: large; }
label, .style33 { background-color: pink; color: red; font-weight: normal; font-size: small; }
</style>
<script type="text/javascript">
function highlight(btn)
{
var inputs = btn.form.elements[btn.name];
for(var i = 0; i < inputs.length; i++)
{
var labelID = "L" + inputs[i].id.substring(1);
document.getElementById(labelID).className = inputs[i].checked ? "style17" : "style33";
}
}
</script>
</head>
<body>
<form>
<table border=1 cellspacing=10>
<tr>
<td>
<input name="radioBtn" type="radio" id="R1" onclick="highlight(this)" />
</td>
<td>
<label id="L1" for="R1">Radio Button 1</label>
</td>
</tr>
<tr>
<td>
<input name="radioBtn" type="radio" id="R2" onclick="highlight(this)" />
</td>
<td>
<label id="L2" for="R2">Radio Button 2</label><br />
</td>
</tr>
<tr>
<td>
<input name="radioBtn" type="radio" id="R3" onclick="highlight(this)" />
</td>
<td>
<label id="L3" for="R3">Radio Button 3</label>
</td>
</tr>
</table>
</form>
</body>
</html>
Highlight text using form radio
