Check box replaced by an image after on click in HTML

Question

I want to add image in check box in HTML so that when i click on check box it should be replaced by an image.What is the way to do it?

Answer 1

Let cb be a checkbox, and src the source of the image you want to be displayed.

cb.onclick = function(){
    if(!this.img){
        var img = this.img = document.createElement("image");
        img.src=src;
        img.cb = this;
        img.onclick = function(){
            this.parentNode.replaceChild(this.cb,this);
            }
        }
    this.parentNode.replaceChild(this.img,this);
    }