hasclass - remove class jquery

Haga clic alternar con jQuery

Question

He usado una función de desplazamiento donde haces x en mouseover y y y mouseout. Intento lo mismo para hacer clic, pero parece que no funciona:

$(''.offer'').click(function(){ 
  $(this).find('':checkbox'').attr(''checked'', true ); 
},function(){
  $(this).find('':checkbox'').attr(''checked'', false ); 
});

Quiero que se marque la casilla de verificación al hacer clic en un div , y desmarcaré si hago clic otra vez: un clic en alternar.

Answer 1

¿Por qué no en una línea?

$(''.offer'').click(function(){
    $(this).find('':checkbox'').attr(''checked'', !$(this).find('':checkbox'').attr(''checked''));
});

Answer 2

Advertencia: el uso de attr () o prop () para cambiar el estado de una casilla de verificación no desencadena el evento de cambio en la mayoría de los buscadores con los que he probado. El estado verificado cambiará pero no se producirá ningún evento de borboteo. Debe desencadenar el evento de cambio manualmente después de configurar el atributo comprobado. Tenía otros controladores de eventos que monitoreaban el estado de las casillas de verificación y funcionarían bien con los clics directos de los usuarios. Sin embargo, establecer el estado comprobado mediante programación no genera el evento de cambio de manera consistente.

jQuery 1.6

$(''.offer'').bind(''click'', function(){ 
    var $checkbox = $(this).find('':checkbox'');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger(''change''); //<- Works in IE6 - IE9, Chrome, Firefox
});

Answer 3

En JQuery no creo que haga clic en () acepta dos funciones para alternar. Debería usar la función toggle () para eso: toggle

Answer 4

Esto se hace fácilmente volteando el estado actual ''marcado'' de la casilla de verificación con cada clic. Ejemplos:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find('':checkbox'');
       $checkbox.attr(''checked'', !$checkbox.attr(''checked''));
 });

o:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find('':checkbox'');
       $checkbox.attr(''checked'', !$checkbox.is('':checked''));
 });

o, manipulando directamente la propiedad DOM ''checked'' (es decir, no usando attr() para obtener el estado actual de la casilla de verificación cliqueada):

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find('':checkbox'');
       $checkbox.attr(''checked'', !$checkbox[0].checked);
 });

...y así.

Nota: desde jQuery 1.6, las casillas de verificación deben establecerse usando prop not attr :

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find('':checkbox'');
       $checkbox.prop(''checked'', !$checkbox[0].checked);
 });

Answer 5

La solución más fácil

$(''.offer'').click(function(){
    var cc = $(this).attr(''checked'') == undefined  ? false : true;
    $(this).find('':checkbox'').attr(''checked'',cc);
});

Answer 6

Otra solución alternativa para alternar el valor de la casilla de verificación:

<div id="parent">
    <img src="" class="avatar" />
    <input type="checkbox" name="" />
</div>


$("img.avatar").click(function(){

    var op = !$(this).parent().find('':checkbox'').attr(''checked'');
    $(this).parent().find('':checkbox'').attr(''checked'', op);

});

Answer 7

Otro enfoque sería extender jquery como este:

$.fn.toggleCheckbox = function() {
    this.attr(''checked'', !this.attr(''checked''));
}

Luego llame:

$(''.offer'').find('':checkbox'').toggleCheckbox();

Answer 8

Puede usar la función de toggle :

$(''.offer'').toggle(function() {
    $(this).find('':checkbox'').attr(''checked'', true);
}, function() {
    $(this).find('':checkbox'').attr(''checked'', false);
});

Answer 9

Tengo una sola casilla de verificación llamada chkDueDate y un objeto HTML con un evento de clic de la siguiente manera:

$(''#chkDueDate'').attr(''checked'', !$(''#chkDueDate'').is('':checked''));

Al hacer clic en el objeto HTML (en este caso, un <span> ) se alterna la propiedad marcada de la casilla de verificación.

Answer 10

intente cambiar esto:

$(this).find('':checkbox'').attr(''checked'', true ); 

a esto:

$(this).find('':checkbox'').attr(''checked'', ''checked''); 

No estoy 100% seguro de que eso lo haga, pero parece recordar que tengo un problema similar. ¡Buena suerte!

Answer 11

jQuery: Mejor manera, delegue las acciones a jQuery (jQuery = jQuery).

$( "input[type=''checkbox'']" ).prop( "checked", function( i, val ) {
    return !val;
});

Answer 12

    $(''controlCheckBox'').click(function(){
    var temp = $(this).prop(''checked'');
    $(''controlledCheckBoxes'').prop(''checked'', temp);
});

Answer 13

$(''.offer'').click(function() { 
    $('':checkbox'', this).each(function() {
        this.checked = !this.checked;
    });
});

Answer 14

$(''.offer'').click(function(){ 
    if ($(this).find('':checkbox'').is('':checked''))
    {
        $(this).find('':checkbox'').attr(''checked'', false); 
    }else{
        $(this).find('':checkbox'').attr(''checked'', true); 
    }
});

Answer 15

<label>
    <input
        type="checkbox"
        onclick="$(''input[type=checkbox]'').attr(''checked'', $(this).is('':checked''));"
    />
    Check all
</label>