2010-03-31 9 views
10

El siguiente código funciona en FF, Safari, Chrome. Pero IE me está dando problemas.IE no detecta el método de cambio de jquery para la casilla

Cuando se marca una casilla de verificación, no puedo obtener IE para detectarlo.

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

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

    return false; 
}); 

Simplemente, no recibo esa ventana emergente de alerta, como esperaba.
incluso he intentado de esta manera:

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

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

    return false; 
}); 

Aquí está la entrada simple casilla: <input class="prod" type="checkbox" name="checkbox_ID" id="checkbox_ID" value="1"/>

Alguien sabe si IE requiere un método diferente jQuery? o mi código está apagado?

Respuesta

5

Como señaló sblom con IE7 y por debajo de lo que necesita el elemento a borrar de esta acción al fuego, posteriores versiones de IE y otros navegadores no Necesito el elemento para perder foco explícitamente, simplemente cambiar debería desencadenar este evento (como se muestra en mi ejemplo a continuación).

Creo que su problema podría ser que está tratando de acceder a la variable 'valor' cuando está fuera del alcance.

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

return false; 
}); 

Here is a working preview, observe que debido a que regrese falsa al final de la función se restablece la casilla de verificación a su valor anterior, como que ha anulado el efecto del clic.

6

Probablemente funcionará si hace clic en otro lugar después de hacer clic en la casilla de verificación. IE es raro así.

puede ser que intente algo como:

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

Más información aquí: http://norman.walsh.name/2009/03/24/jQueryIE

+0

Sé que esto no tiene sentido a punto afuera (¿ves lo que hice allí ?: P) ya que estoy seguro de que esto es solo para que el OP pruebe su código. Pero dado que está asignando comandos de desenfoque/enfoque a una acción de clic, para desencadenar una acción de cambio, ¿no tendría sentido utilizar simplemente la acción de hacer clic en este caso? O si realmente sintió que esto era necesario, probablemente debería llamar $ (this) .trigger ('change'); – Jay

+0

Esta idea funcionó muy bien para mí. Lo usé en prototypejs ... if (Prototype.Browser.IE) { el.observe ('clic', función (e) { e.elemento(). desenfoque(); e.element(). Focus(); }); } – apinstein

1

El evento de cambio sólo se activa cuando cambia el valor después del control pierde el foco. Para una casilla de verificación, es mejor conectarse al evento click.

Aquí está la documentación sobre cuando se dispara el evento onchange: link text

+0

El evento Click no es lo mismo que cambiar. Por lo general, está bastante cerca, así que puede funcionar bien. Pero hay formas de hacer un clic en IE forzar el cambio para ser llamado en caso de un cambio de buena fe. – sblom

+1

Aquí hay más información sobre el evento de cambio. http://www.quirksmode.org/dom/events/change.html. – R0MANARMY

+0

Esto no es cierto en todos los casos, consulte la cita a continuación de los documentos de la API de jQuery. "Para cuadros de selección, casillas de verificación y botones de opción, el evento se dispara inmediatamente cuando el usuario hace una selección con el mouse, pero para los otros tipos de elementos el evento se aplaza hasta que el elemento pierde el foco." Citado de http://api.jquery.com/change/ – Jay

1

Debe usar el evento propertychange en lugar del evento change. Tenga en cuenta que el evento propertychange se activará en otras cosas que no sean marcadas/desmarcadas. Con el fin de compensar esto, se debe comprobar el window.event.propertyName (para IE solamente):

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

Esto se rompe en IE9 +. Necesita verificar la versión del navegador para IE8 y abajo. – Muhd

0

intentar usar

jQuery('#checkbox').click(handleFunc); 

en lugar de evento "cambio"

Cuestiones relacionadas