editing label and javascript (12)

links

history

item nametags

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);
}}}

some permissive license goes here
contact

tsunami