IE not detecting jquery change method for checkbox

Question

The code below works in FF, Safari, Chrome. But IE is giving me issues.

When a checkbox is checked, I cannot get IE to detect it.

$("#checkbox_ID").change(function(){

   if($('#'+$(this).attr("id")).is(':checked'))
   { 
       var value = "1"; 
   }
   else
   { 
       var value = "0"; 
   } 
   alert(value);

   return false;
});

Simply, I'm not getting that alert popup, as expected.
I've even tried it this way:

$("#checkbox_ID").change(function(){

   if( $('#'+$(this).attr("id")'+:checked').attr('checked',false))
   { 
       var value = "1"; 
   } 
   else
   { 
       var value = "0"; 
   } 
   alert(value);

   return false;
});

Here's the simple checkbox input: <input class="prod" type="checkbox" name="checkbox_ID" id="checkbox_ID" value="1"/>

Anyone know if IE requires a different jquery method? or is my code just off?

Answer 1

It'll probably work if you click somewhere else after you click the checkbox. IE's weird like that.

Might try something like:

$(function () {
  if ($.browser.msie) {
    $('input:checkbox').click(function () {
      this.blur();
      this.focus();
});

More info here: http://norman.walsh.name/2009/03/24/jQueryIE

Answer 2

The change event only fires when the value changes after the control loses focus. For a checkbox it is better to hook up to the click event.

Here is the documentation on when the onchange event fires: link text

Answer 3

As noted by sblom with IE7 and below you need the element to blur for this action to fire, later versions of IE and other browsers don't need the element to explicitly lose focus, simply changing should fire this event (as shown in my below example).

I believe that your problem could be that you're trying to access the 'value' variable when it is out of scope.

$("#checkbox_ID").change(function(){
var value;
if($(this).is(':checked'))
{ 
    value = "1"; 
}
else
{ 
    value = "0"; 
} 
alert(value);

return false; 
});

Here is a working preview, notice that because you return false at the end of the function it resets the checkbox to its previous value, as you have canceled the effect of the click.

Answer 4

You need to use the propertychange event instead of the change event. Keep in mind that the propertychange event will fire on things other than checked/unchecked. In order to compensate for this, you must check the window.event.propertyName (for IE only):

$(':checkbox').bind($.browser.msie ? 'propertychange': 'change', function(e) {
    if (e.type == "change" || (e.type == "propertychange" && window.event.propertyName == "checked")) {
        // your code here
    }
});