label and javascript
Luke Breuer
It would be nice to do <label><input type="checkbox" />label text</label> and access the checkbox via javascript, which is fine. However, the label text cannot be changed without obliterating/replacing the checkbox.
Try putting the above HTML and the following javascript in a page. The purpose is to change the text value of the label without replacing the checkbox (and therefore any properties/events assigned to it). The below works in Firefox and IE, but in IE, the checkbox's checked property won't change from its current value. Apparently removing a control before the onclick event is finished prevents its effect from happening in IE, but not Firefox. It should be possible to overcome this; an alternative is to use <input type="checkbox" id="id"><label for="id">blah</label>.
{{var label = document.getElementsByTagName('label')[0];
var chk = label.firstChild;
var i = 0;
chk.onclick = function()
{
var label = this.parentNode;
label.removeChild(this);
label.innerHTML = '';
label.appendChild(this);
var txt = document.createTextNode(++i);
label.appendChild(txt);
}}}