IE onClick won't check the box unless you click the image on the label?
Ok I have a label, inside this label there is a div that contains an image and some text. The div has an onClick call for a javascript function that changes the color of the div inside the label and also checks the checkbox (for some reason IE and firefox didn't want to check it correctly, chrome worked fine). Javascript:
<script language="javascript" type="text/javascript">
function changecolor(id, chck1, firstcolor, secondcolor)
{
divid = document.getElementById(id);
chkboxid = document.getElementById(chck1);
if(chkboxid.checked){
divid.style.background= firstcolor;
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari/') == -1){
chkboxid.checked = false ;
}
}
else{
divid.style.background= secondcolor;
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari/') == -1){
chkboxid.checked = true ;
}
}
}
HTML:
<input type="checkbox" id="idbox" name="cboxwithlabel" value="Another check box"><label for="idbox"><div class="listing" onClick="changecolor('Test33', 'idbox', '#09C', '#0F0');" id="Test33">Another checkbox<img src="images/checkmark.png" height="80" width="80" /></div></label>
Ok, so using this works fine in Firefox and Chrome, but IE 7 (haven't tested other versions yet), it will check the checkbox if you click the image inside the div. Clicking on the div itself causes the background color to change. So what fix does IE have so that when the div is clicked, it also checks the checkbox?
source to share
One of the nice things browsers do is fire click events from <label>
elements for us .
So my recommendation is to bind the click handler to the checkbox. This way your function becomes much simpler.
Also, it was forbidden to place block level elements inside line level elements, so I changed yours <div>
to <span>
and used CSS to make it render as a block level element.
<html>
<head>
<script language="javascript" type="text/javascript">
function changecolor( cbox, divId, firstcolor, secondcolor )
{
document.getElementById( divId ).style.background = cbox.checked ? firstcolor : secondcolor;
}
</script>
<style type="text/css">
span.listing {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="idbox" name="cboxwithlabel" value="Another check box" onClick="changecolor(this, 'Test33', '#09C', '#0F0');">
<label for="idbox">
<span class="listing" id="Test33">
Another checkbox<img src="images/checkmark.png" height="80" width="80" onclick="this.parentNode.click()" />
</span>
</label>
</body>
</html>
source to share
Some comments suggested it, but as part of my troubleshooting, I put a warning before checking the box.
alert('test');
chkboxid.checked = true;
I think you will see that the warning is never executed and the browser validation code behaves differently in IE and FF.
If not, you'll at least be on your way to figuring out why this isn't working by moving the alert.
source to share