document.getElementById not working

Question

I have 2 chekboxes on a page. There are wrapped in a table cell each within their own row. Doing a document.getElementById('chk1_FEAS~1005') returns the element but document.getElementById('chk5_STG2~1005') is null. For what reasons could this be happening? (I'm testing in IE 8).

<input id="chk1_FEAS~1005" value="JobStages###StageCode~JobCode###FEAS~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width:0px;padding:1px;margin:0px;height:14px;"  type="checkbox" />

<input id="chk5_STG2~1005" value="JobStages###StageCode~JobCode###STG2~1005" onclick="addRemoveRow(this.value,this.checked)" style="border-width:0px;padding:1px;margin:0px;height:14px;"  type="checkbox" />

Answer 1

Your Id has invalid characters:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

More information here.

Answer 2

document.getElementById('hk5_STG2~1005') 

should be

document.getElementById('chk5_STG2~1005') 

:-)

Answer 3

Looking at your sample it is a typo, the second item should be, document.getElementById('chk5_STG2~1005')

Also, I would recommend removing the ~ character as it is invalid for an id.

Answer 4

For what it's worth, I have similar problems using document.getElementById on checkboxes in IE8. Try adding this tag to your head section :-

<meta http-equiv="X-UA-Compatible" content="IE=7" />

This will force IE8 into IE7 compatibility mode. It works for me as a workaround until I find-out what's really up.