Change image if any checkbox on the page was checked or unchecked?

Question

I have a lot of checkboxes with different IDs on the page.

I want to change picture everytime when any checkbox was checked or unchecked...

Please, tell me how to do that..

Answer 1

The basic code is shown below. Bind a onchange event to each input[type=checkbox] .

$(':checkbox').change(function(){
    $('#imgid').attr('src', 'newimg.png');
})

Pure JavaScript:

var inputs = document.getElementsByTagName("input");
for(var i=inputs.length-1; i>=0; i--){ //Loop through each input element in the page
    var input = inputs[i];
    if(input.type == "checkbox"){
        input.onchange = function(){   //Bind `change` event handler
            document.getElementById("imgId").src = "newimg.png";
        }
    }
}

Note: The previously shown code snippets have to be called when the document has loaded. Either by using window.onload = function(){ /*Code here*/ } , or by adding the code at the end of the document.