views:

1560

answers:

2

Ok, I have a label, inside this label is a div, which contains an image, and some text. The div has an onClick call to 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 only check the checkbox if you click the image inside the div. Clicking the div itself, only changes the background color. So what is the fix to have IE work so that when you click the div it also checks the checkbox?

+2  A: 

One of the nice things that browsers do, is triggering click events from <label> elements for us.

So my recommendation is to attach the click handler to the checkbox itself. This way your function becomes MUCH simpler.

Also, it's illegal to put block-level elements inside of line-level elements, so I've changed your <div> to a <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>
Peter Bailey
That works, except now when you click the image in IE it it doesn't do the onClick function, it has to be the Span that you click... so ended up with the exact opposite problem. Both Firefox and Chrome work perfect with this solution.
John
Ok reaidng up, the image problem in this case is just an IE issue. I'll be able to deal with that. Thanks.
John
I had accidentally left some debug code in there. I updated it so clicking the image works in IE now.
Peter Bailey
A: 

Some comments have suggested it, but as a part of troubleshooting I would put an alert before setting the checkbox.

alert('test');
chkboxid.checked = true;

I think you will see that the alert is never executed and the code checking the browser is behaving differently in IE and FF.

If not, you will at least be on your way to finding out why this isn't working by moving the alert around.

Mayo