There is a great article and javascript on CodeProject.com. The code was originally written by BrainError.
I had to add support for labels, however. If you had a label like this:
<label for="CheckBoxID"></label>
it wouldn’t update the image if you clicked it. I added the following to the js file:
In function replaceChecks, I added one line: inputs[i].onclick = new Function(‘imgChange(‘+i+’)’);
Here’s the relevant section of code:
//set image
if(!inputs[i].disabled) {
img.onclick = new Function('checkChange('+i+')');
inputs[i].onclick = new Function('imgChange('+i+')');
}
I also had to add a separate function here:
//change the image if the checkbox is changed.
function imgChange(i) {
if(inputs[i].checked) {
document.getElementById('checkImage'+i).src=imgCheckboxTrue;
} else {
document.getElementById('checkImage'+i).src=imgCheckboxFalse;
}
}
In continuing to develop my application, I discovered that my edits were not compatible with IE. I finally got it to work, but the resulting edits were too much to post here. Here is a link to the modified javascript file, however. http://www.keyboardface.com/downloads/chk/wdx_inputreplacer.js
Can you give me a little more information – what do you mean by “not update again”?
Best,
Tom
Hi Tom !
In fact, the script only seems to work. The radio buttons and checkboxes are replaced with some images but not really well. For example the box that should be checked isn’t, and the the checkbox that should be unchecked, is checked on load of the page… (but the images names are configured correctly in the js file)
When I click on a checkbox, the image doesn’t change (update)(checked or unchecked). It’s static.
It’s strange because I use the script with the Drupal CMS. Every input has a different ID…
For example a checkbox iput like this one:
That’s it 🙂
I hope you can help me…
Thanks
Matt