Haga clic en Alternar con jQuery

Question

He utilizado una función vuelo estacionario en el que hacer x e y en mouseover y mouseout. Estoy intentando el mismo para cada clic, pero no parece funcionar:

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

Quiero que la casilla de verificación para comprobar cuando se hace clic en un div, y sin marcar si se hace clic de nuevo - un clic de palanca

.

Answer 1

Esto se hace fácilmente moviendo el estado actual 'marcado' de la casilla de verificación sobre 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, mediante la manipulación directa del DOM 'verificado' propiedad (es decir, no utilizando attr() a Obtener el estado actual de la casilla de verificación hecho clic):

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

... y así sucesivamente.

Nota: desde jQuery 1.6, casillas de verificación deben establecerse utilizando prop no attr:

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

Answer 2

Otro enfoque sería jQuery extendida de esta manera:

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

A continuación, llamar a:

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

Answer 3

Advertencia: utilizando attr () o prop () para cambiar el estado de una casilla de verificación no disparar el evento de cambio en la mayoría de los navegadores que he probado con. El estado de activación cambiará, pero sin propagación de eventos. Debe activar el evento de cambio manualmente después de establecer el atributo checked. Tenía algunos otros controladores de eventos de supervisión del estado de casillas de verificación y que trabajaría bien con el usuario hace clic directos. Sin embargo, establecer el estado de activación mediante programación no puede desencadenar el evento de cambio constante.

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 4

Se puede utilizar la función de href="http://docs.jquery.com/Events/toggle" rel="noreferrer"> toggle :

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

Answer 5

¿Por qué no en una línea?

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

Answer 6

Tengo una sola casilla 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>) alterna la característica sea comprobada de la casilla de verificación.

Answer 7

jQuery:. La mejor manera, delegar las acciones para jQuery (jQuery jQuery =)

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

Answer 8

intentar cambiar esto:

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

a esto:

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

No es 100% seguro de si eso va a hacerlo, pero me parece recordar que tiene un problema similar. Buena suerte!

Answer 9

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

Answer 10

En jQuery no creo que haga clic () acepta dos funciones para alternar. Se debe utilizar la función activar () para que: http://docs.jquery.com/Events/toggle

Answer 11

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

Answer 12

solución más fácil

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

Answer 13

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

Answer 14

Otra solución alternativa para cambiar el valor 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 15

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