property - jQuery, casillas de verificación y.is(": marcado")

jquery selector has attribute any value

Question

Cuando vinculo una función a un elemento de casilla de verificación como:

$("#myCheckbox").click( function() {
alert($(this).is(":checked"));
});

La casilla de verificación cambia su atributo marcado antes de que se active el evento, este es el comportamiento normal y da un resultado inverso.

Sin embargo, cuando lo hago:

$("#myCheckbox").click();

La casilla de verificación lo cambia el atributo verificado después de que se desencadene el evento.

Mi pregunta es, ¿hay alguna manera de desencadenar el evento click de jQuery como lo haría un clic normal (primer escenario)?

PD: ya he intentado con el trigger(''click'') ;

Answer 1

A partir de junio de 2016 (utilizando jquery 2.1.4) ninguna de las otras soluciones sugeridas funciona. Verificar attr(''checked'') siempre devuelve undefined y is(''checked) siempre devuelve false .

Solo usa el método prop:

$("#checkbox").change(function(e) {
if ($(this).prop(''checked'')){
console.log(''checked'');
}
});

Answer 2

Además de la respuesta de Nick Craver, para que esto funcione correctamente en IE 8 necesita agregar un manejador de clic adicional a la casilla de verificación:

// needed for IE 8 compatibility
if ($.browser.msie)
$("#myCheckbox").click(function() { $(this).trigger(''change''); });
$("#myCheckbox").change( function() {
alert($(this).is(":checked"));
});
//Trigger by:
$("#myCheckbox").trigger(''click'').trigger(''change'');

De lo contrario, la devolución de llamada solo se activará cuando la casilla de verificación pierda su foco, ya que IE 8 mantiene enfocado en las casillas de verificación y radios cuando se hace clic.

_{Aunque no he probado en IE 9 .}

Answer 3

Bueno, para que coincida con el primer escenario, esto es algo que se me ocurrió.

http://jsbin.com/uwupa/edit

Básicamente, en lugar de vincular el evento "clic", vincula el evento "cambiar" con la alerta.

Luego, cuando activa el evento, primero activa el clic y luego activa el cambio.

Answer 4

Hay una solución 1.3.2 que funciona en jQuery 1.3.2 y 1.4.2 :

$("#myCheckbox").change( function() {
alert($(this).is(":checked"));
});
//Trigger by:
$("#myCheckbox").trigger(''click'').trigger(''change'');​​​​​​​​​​​​​

Pero estoy de acuerdo, este comportamiento parece fallar en comparación con el evento nativo.

Answer 5

Si anticipas este comportamiento bastante indeseado, entonces una de las alternativas sería pasar un parámetro extra de jQuery.trigger () al controlador de clic de la casilla de verificación. Este parámetro adicional es notificar al controlador de clics que el clic se ha desencadenado programáticamente, en lugar de que el usuario haga clic directamente en la casilla de verificación. El controlador de clic de la casilla de verificación puede invertir el estado de comprobación reportado.

Así que aquí está cómo activaría el evento click en una casilla de verificación con el ID "myCheckBox". Tenga en cuenta que también estoy pasando un parámetro de objeto con un único miembro, nonUI, que se establece en verdadero:

$("#myCheckbox").trigger(''click'', {nonUI : true})

Y así es como lo manejo en el controlador de eventos click del checkbox. La función del controlador comprueba la presencia del objeto nonUI como su segundo parámetro. (El primer parámetro es siempre el evento en sí.) Si el parámetro está presente y se establece en verdadero, invierto el estado comprobado. Si no se transfiere dicho parámetro, lo que no ocurrirá si el usuario simplemente hace clic en la casilla de verificación en la interfaz de usuario, entonces informo sobre el estado actual de comprobación:

$("#myCheckbox").click(function(e, parameters) {
var nonUI = false;
try {
nonUI = parameters.nonUI;
} catch (e) {}
var checked = nonUI ? !this.checked : this.checked;
alert(''Checked = '' + checked);
});

Versión de JSFiddle en http://jsfiddle.net/BrownieBoy/h5mDZ/

Lo he probado con Chrome, Firefox e IE 8.

Answer 6

Todavía estoy experimentando este comportamiento con jQuery 1.7.2. Una solución simple es diferir la ejecución del manejador de clics con setTimeout y dejar que el navegador haga su magia mientras tanto:

$("#myCheckbox").click( function() {
var that = this;
setTimeout(function(){
alert($(that).is(":checked"));
});
});

Answer 7

La forma más rápida y fácil :

$(''#myCheckbox'').change(function(){
alert(this.checked);
});

$el[0].checked;

$ el - es un elemento de selección jquery.

¡Disfrutar!

Answer 8

 $("#checkbox").change(function(e) {
if ($(this).prop(''checked'')){
console.log(''checked'');
}
});

Answer 9

$( "#checkbox" ).change(function() {
if($(this).is(":checked")){
alert(''hi'');
}
});

Answer 10

$(''#myCheckbox'').change(function () {
if ($(this).prop("checked")) {
// checked
return;
}
// not checked
});

Nota: en versiones anteriores de jquery, estaba bien usar attr . Ahora se sugiere usar prop para leer el estado.

Answer 11

<input id="widget-wpb_widget-3-custom_date" class="mycheck" type="checkbox" value="d/M/y" name="widget-wpb_widget[3][custom_date]" unchecked="true">
var atrib = $(''.mycheck'').attr("unchecked",true);
$(''.mycheck'').click(function(){
if ($(this).is(":checked"))
{
$(''.mycheck'').attr("unchecked",false);
alert("checkbox checked");
}
else
{
$(''.mycheck'').attr("unchecked",true);
alert("checkbox unchecked");
}
});

Answer 12

if ($.browser.msie) {
$("#myCheckbox").click(function() { $(this).trigger(''change''); });
}
$("#myCheckbox").change(function() {
alert($(this).is(":checked"));
});